1

I have a large dataset of which I don't know the total number of records. I want to initialize the table with a small number of items (20) and load items in bunches of 20 when the table is scrolled.

I have different behaviours with Primeng 13.4.1 and with Primeng 14 or 15.

Primeng 13.4.1 and Angular 13.0.3 https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-frffd5?file=src%2Fapp%2Fapp.component.ts

I initialize the table array with 20 elements Array.from({ length: 20 }) and the table rows number also to 20. The table loads the data as expected, loading the first items and loading new items when scrolling. The issue I have in this scenario is that, if I load for example 200 items and then I use filters that reduce the number of items to 10, the first rows of the table are updated correctly but I still see the items loaded before.

Only after scrolling up and down several times, the table is refreshed correctly and I see the correct number of filtered items.

Primeng 14.2.2 and Angular 14.1.3 https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-4th7fh?file=src%2Fapp%2Fapp.component.ts Primeng 15.2.0 and Angular 15.2.0 https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-mchojj?file=src%2Fapp%2Fapp.component.ts

If I do not initialize the table array with a number of elements equal or superior to the total number of rows of my dataset (which is unknown but above 100k records), the table only loads the number of rows I specify, without triggering other load events for the following pages. The result is that, if I initialize the array to 20 elements, only the first 20 records are loaded. If I initialize the table array with 10000 or more elements, the scrolling becomes infinitely slow and long with empty rows, which is misleading and creates a bad user experience. Besides,if I initialize the table array with 10000 elements and filter down to only 10 records, for example, the records are updated correctly immediately but the scroll remains of a table of 10000 rows, which is huge, with empty rows.

Angular version

13.0.3 and 14.1.3 and 15.2.0

PrimeNG version

13.4.1 and 14.2.2 and 15.2.0

I tried in different versions of Primeng/Angular and initializing the table in different ways.

I expected the table to load data in chunks of 20 records as specified in table rows without having to initialize the table array to a 10000 elements or more. I expected that when a filter is applied, the table is refreshed accordingly without having to trigger many load events scrolling up and down.

Daniele
  • 11
  • 4

0 Answers0