Primeng: Feature request: support of virtualScroller inside p-table when pagination is enabled.

[sunnyyadav100]

Current Waiting Time: ~8 weeks.

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

Current behavior

I am using paginated turbo table, where I am showing all data (max 500 records) as 40 records per page. As per business use case, end user can also have a link to view all data (max 500 records). Loading 500 records at once is slowing down the table rendering.

Expected behavior

After a threshold, table out of the box support virtualization
OR
Provide a way to extend body template where developer can use virtialScroller component as their need.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 5.X
  
  Angular 7.1.1

• PrimeNG version: 5.X
  
  Prime NG 7.0.0

• 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 ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[JacobSiegle]

The docs include virtual scroll - https://www.primefaces.org/primeng/#/table/scroll

[sunnyyadav100]

In my scenario lazyLoad bind function has 2 operations. As this table is used as paginated table lazyLoad function is making API call to retrieve records as per page. To use virtual scroll as per documentation https://www.primefaces.org/primeng/#/table/scroll - my lazyLoad function has to switch logic from pagination to logical slicing of data for virtual scroll which I am not able to figure it out.

[JacobSiegle]

The doc example does use lazy and virtual scroll. It should be relatively easy to include the virtual scroll if you already have lazy loading set up because it's the same callback for lazy loading.

<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="200px" [virtualScroll]="true" (onLazyLoad)="loadDataOnScroll($event)" [lazy]="true" [totalRecords]="totalRecords" [virtualRowHeight]="34" [loading]="loading">

If you need further support you should ask on the PrimeNG forums. This doesn't sounds like an issue but a question. Please correct me if i'm wrong.

[yigitfindikli]

TurboTable already have virtual scroll support, like at mentioning @JacobSiegle. Please use forum for questions and help requests. https://forum.primefaces.org/

[sunnyyadav100]

@yigitfindikli and @JacobSiegle ,
I am aware of virtual scroll support in table. I can see also see the code here https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts.

My ask or feature request was not about supporting a virtual scroll, Table already has it. My ask to default support of virtual scroll after a threshold or if default support of virtual scroll after a threshold is not possible then expose the body template, so that developers can use @angular/cdk virtualScroll as per their need.

When pagination is enabled, we need virtual scroll with the page.

Need of default support of virtual scroll after threshold -> My table is paginated. By default user can view 50 records per page. There is an option to change records per page. We have 3 options 50, 100, 150.

Rendering 50 rows with 50 columns is fine but when rendering 100 or 150 rows it is taking more time to render.

[yeweinan]

Agreed to @sunnyyadav100. Please implement CDK virtual scrolling if it's possible. I believe they are a way better solution than current lazy loading. After all, the virtual scroll should be separate with Lazy loading. They are 2 types of logic.

[mvorisek7]

Hey, I was just able to get a working version of the cdk virtual scroll in the table without lazy loading.

https://github.com/primefaces/primeng/issues/7419#issuecomment-509294485