Any idea on how to implement lazy loading ?

[ZiedHf]

So let me explain, the requirements I have are:

• Fetch data as the user scrolls down.
• The table height should be initially displayed without a 'load more' button or loading text.
• The user should be able to navigate freely in the table using the mouse or keyboard. For example, pressing the 'End' button should scroll to the latest row.

I haven't found a good example that explains how to achieve this.

I have many questions such as :

Should I use the infinite query of the react query ? As you see, there is no next page concept here since it is a huge table and the user can scroll freely.

What if the user scrolls to the end of the page? How do I tell React Table which rows should be displayed initially and which ones should be displayed at the end?

Should I use the pagination option of React Table, or can I skip it and populate the table with empty data initially, fetching and handling real data as the user scrolls?

Any ideas?

[KevinVandy]

We have this exact example in the docs already
https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-infinite-scrolling

[ZiedHf]

Hi Kevin, thanks for your reply.

I don't want to replicate the behavior shown in this example - which I have seen before.

This approach does not meet the second requirement, as the scrollbar should be displayed entirely. And the user can navigate freely in the whole table.

Please take a moment to read the description if you have enough time.

Thank you.

[KevinVandy]

Then simply follow the other virtualization examples where all of the data is fetched up front.

[ZiedHf]

Hey Kevin, again thanks for your reply.

I am using the Virtualization Rows example right now where the data is loaded entirely. The only difference that I am using react-window for that.

As mentioned in my last comment, I would like to make one change: fetch the data partially and load more based on the scroll position in the table body. That's the only part of the "lazy loading" I want to implement.

I don't want to change the behavior of the table, I want to improve the performance without changing the scroll bar height nor adding a Load More button nor anything else. Which I didn't find in the documentation.

Example:
Suppose each row height is 10px
And the total count is 1000 rows
That means I want to display 1000 * 10px scrollbar height
That also means that the user should be able to navigate to any part of the table.
So the data in the client side could contain the first 100 rows and the latest 100 rows for instance.

And I am wondering which technique I could use ? Clearly I can't use the setPageIndex method since I don't really have a page concept, like the user can navigate to a position between two page; suppose he land on the row 550 which should display two parts of two different page, if I am displaying 100 rows per "page". Same goes for the nextPage and previousPage methods.

I created a Mermaid sequence diagram to try to clarify what I want to achieve.

The only solution that worked for me right now, is something very ugly as I am populating the table with undefined data, and I am using no features from react table which means the other features of react table could potentially fail to work with this:

const onScroll = (fromRow: number, toRow: number, total: number) => {
        const n = toRow - fromRow;
        const d = generateData(n); // or fetch data
        // Pass to react table the data of displayed rows (based on the viewport - from an to)
        return [...Array(fromRow).fill(undefined), ...d, ...Array(total - toRow).fill(undefined)];
};