DataTable with virtual scrolling

[martinn]

Hi, I've been trying to make the datatable work with virtual scrolling for the past day and a half . There is something I cannot wrap my head around:
In the examples ( https://stackblitz.com/edit/react-byvqj ... 2Fdemo.js ) I can see that the initial array ( virtualCars ) has been preset to an empty array with a length of 100000. Now, this works, but if I provide an empty default array, the onLazyLoad function is called with {first:0, last:0}. Is this behavior correct? Shouldn't 'last' be calculated based on the viewport/itemSize? Basically what I am trying to say is, I cannot correctly load the initial data with the following changes from the example above:

* const [virtualCars, setVirtualCars] = useState([]) <-- empty initial array instead of Array.from({10000})

You can check the edited example here https://stackblitz.com/edit/react-ntffl ... %2Fdemo.js and check the console - last is always 0 and not calculated correctly.

Am I missing something?
Any help would be appreciated, thanks!

[Farmer085]

Based on your description, it seems that the issue is related to the calculation of the "last" property in the onLazyLoad function when an empty initial array is provided. The "last" property is used to determine the index of the last visible row, and it should be calculated based on the viewport and item size.

In the provided example, the "last" property is initially set to 0 when an empty initial array is provided. This is because the "last" property is calculated based on the length of the "virtualCars" array, which is initially empty. To fix this issue, you need to update the "last" property based on the viewport and item size.

One way to achieve this is to use the "scrollTop" and "clientHeight" properties of the viewport element to calculate the index of the last visible row. You can do this by dividing the "scrollTop" by the item size and adding the "clientHeight" divided by the item size. Here's an example:

javascript
Copy code
const onLazyLoad = (e) => {
const first = e.first;
const rows = e.rows;
const scrollTop = e.scrollTop;
const itemSize = 50; // Replace with your item size
const last = Math.floor(scrollTop / itemSize) + Math.ceil(rows / itemSize);

// Load data from the server using the "first" and "last" indices
// and update the "virtualCars" state with the loaded data
// ...
};
This should calculate the "last" property correctly based on the viewport and item size, and enable you to load the initial data correctly even when an empty initial array is provided.

I hope this helps! Let me know if you have any further questions. Hope so it will helps you. Dinar Updates

[Imithe201]

hello,
I have a suggestion for you
A DataTable with virtual scrolling is a user interface component that displays tabular data with pagination and scrollable rows. The table loads data on demand, only rendering the rows that are currently visible in the viewport, which improves performance by reducing the amount of data that needs to be loaded at once. Here is an example of how a DataTable with virtual scrolling might look like:

python
Copy code CheckMyRota
+--------------------------------------------------+
| ID | Name | Description |
+----+------------+---------------------------------+
| 1 | Product 1 | This is the first product. |
| 2 | Product 2 | This is the second product. |
| 3 | Product 3 | This is the third product. |
| 4 | Product 4 | This is the fourth product. |
| 5 | Product 5 | This is the fifth product. |
| 6 | Product 6 | This is the sixth product. |
| 7 | Product 7 | This is the seventh product. |
| 8 | Product 8 | This is the eighth product. |
| 9 | Product 9 | This is the ninth product. |
| 10 | Product 10 | This is the tenth product. |
+--------------------------------------------------+
In the example above, the table shows 10 products per page. When the user scrolls down, the table loads the next 10 products and renders them. This allows for faster loading times and better performance when dealing with large datasets. hope so it will helps