Row Data Virtualization

[rebeccaEller]

The current "row - virtualization" feature seams to adress only the rendering virtualization.

Is data - virtualization a planned feature or already possible?

By data virtualization i mean async data loading ,like in pagine but triggered by the srollposition

[KevinVandy]

I already have an example exactly for this

https://www.material-react-table.com/docs/examples/infinite-scrolling

[rebeccaEller]

Thank you very much for the quick response!

Yes i have seen this example and this will fit much modern usecases. But i have a different scenario in mind. Mine is to have a 10000 + Table sorted by some field. So as a application user i know that the data i want to see is somewhere in the middle of that data junk. So i scroll to the middle and only the initally shown data and that in the middle are loaded from the server (maybe some more during srolling ;)).
The peoply from tanstak already have such an example and they simulate the not loaded data by a padding block at the start and the end of the tablebody. Maybe if it where possible to somehow template the tablebody it would be possible to implement it the help of the virutalizer instance on the user side.

[KevinVandy]

I made those TanStack examples for the TanStack Table docs lol. And I made it work just about the same as this infinite scrolling example.

I'm not sure what you are saying is missing though. In MRT, you can get access to the underlying virtualizer instance to control the scrolling if needed with the virtualizerInstanceRef prop. You can either fetch all the data up front, or fetch as the user scrolls.

[rebeccaEller]

Thanks again for the quick respone and sorry that my point from my last post was a little invalid :(.
But what i think remains is, that you have to provide an array of the full datalength to the table component.
So if i you have 10000 Dataeintries, i want to virtualize i have to provide an array with 10000 entries to the MRT Component? To provide only the Viewport+2*overscan amount of data ( the virtual page) i have to trick around with wrapping the data in a proxy object or i am missing something that works in a way like your remote data example? https://www.material-react-table.com/docs/examples/remote?

[KevinVandy]

Hmmm interesting. I hadn't thought about solving it like that. Something with the useInfiniteQuery hook could probably be done to accomplish that