primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.59k stars 1.23k forks source link

DataTable: Use VirtualScroll functionality without knowing the total records beforehand #2899

Closed tsharish closed 11 months ago

tsharish commented 2 years ago

Describe the bug

I am trying to use the VirtualScroll feature of DataTable in lazy mode. In the documentation (https://primefaces.org/primevue/datatable/virtualscroll), the length of the initial array is predefined (100000) but in my case, the results are fetched from the backend and the total rows are dynamic. How should this scenario be handled? If I set a high initial array size (100000, for example), there are a lot of empty rows at the bottom (see screenshot below):

image

If I set a low initial array size (50, when the total records are 115), I am not able to scroll past 50 records. If I try, the screen scrolls back up. I tried multiple ways to "resize" the initial array based on the total number of records provided by the backend, but nothing works. What is the recommended approach when the total record size is dynamic? I've seen similar questions posted in the forum (and I also raised this in discord) but I have not seen any solutions. Thanks.

Reproducer

(https://codesandbox.io/s/fast-thunder-d006rh)

PrimeVue version

3.16.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Expected behavior is that it should be possible to accommodate total number of records that is dynamic based on the data retrieved and filters applied (server-side).

mertsincan commented 11 months ago

I think this line is wrong; const loadedCars = cars.value.slice(first, last); The first and last arrays are outside the boundary of cars array.