Virtual scrolling should be an option

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior When externalPaging (and count, offset) and scrollbarV is combined, the (page) event fires madly on every scroll event. Can’t really tell if some Page was pressed in footer, or is fired by scroll event.

Expected behavior It should be possible to use scrollbarV just for the sake of overview, not firing any page events, as for that I intend to use footer paging [1,2,3] etc. Like an option [virtualScroll]=“false/true”

What is the motivation / use case for changing the behavior? Sometimes/for some projects the load times are long for server side paging requests, and we want to run them only when actually Paging is initiated - not when scroll is all way down or up. However having the V scroll is nice feature for fixed height pages.

Please tell us about your environment: Windows

• Table version: 0.8.x 11.0.4

• Angular version: 2.0.x 4.4.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Latest Chrome

[osnoser1]

Hello, there is some reason why there is no merge of #1297? 😞

[mail2venkat]

Seems…, some of the styles are missing, Try This

[scrollbarV]=“true” to set the scroll

[scrollbarV]=“false” to unset the scroll

HTML

<ngx-datatable class=“material” [columnMode]=“‘flex’” [headerHeight]=“50” [footerHeight]=“50” [scrollbarV]=“true” [rows]=“rows”> <ngx-datatable-column name=“Name” [flexGrow]=“1”> <ng-template let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name=“Gender” [flexGrow]=“1”> <ng-template let-row="row" let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> <ngx-datatable-column name=“company” [flexGrow]=“1”> <ng-template let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> </ngx-datatable>

CSS

.ngx-datatable.scroll-vertical .datatable-body { overflow-y: auto; } .ngx-datatable.scroll-vertical { height: 70vh; }