Fixing the issue #1111

[crypticbeing]

In this updated example, I'm using the tableContainerRef variable that you've already declared and initialized in your original code. The rest of the logic remains the same:

1. I've created a currentMaxPages state variable and initialize it with 4.
2. I passed currentMaxPages as the maxPages option to the useInfiniteQuery hook.
3. I've defined a handleScroll callback function that checks if the user has reached the bottom of the table, and if so, increases the currentMaxPages value by 2.
4. I've added an event listener to the table container element (tableContainerRef.current) to listen for scroll events and call the handleScroll function.
5. When currentMaxPages changes, the useInfiniteQuery hook will automatically refetch the data with the new maxPages value.

Please note that this solution assumes that you have the tableContainerRef and rowVirtualizerInstanceRef variables already declared and initialized in your original code.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
material-react-table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 8:24am
material-react-table-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 8:24am