Example of virtual scrolling in Table

[yusijs]

Describe the solution you'd like

I would love to have a demonstration of best practice ™️ on how to implement virtual scrolling in the React table, as we often have vast amounts of data on the screen at any given time.

Describe alternatives you've considered

If I had the expertise in react to create a best practice ™️ example this would be viable

Alas I would probably make a hacky example that would be more like this

Additional context

Add any other context or screenshots about the feature request here.

[mimarz]

😂

[mimarz]

Maybe we could use react-window for this?

[mimarz]

Related issue #1909 & #2090

[martalalik]

React-window relies on using divs for its infinite scroll capabilities making it hard to implement with our table components as they are native table elements. Most examples online also use divs styled as table for this functionality. We need to investigate what to do next, do we make our table components be castable to divs, find some other way to apply table styling to other elements or try to implement this feature our selves using table elements (if possible).

[oddvernes]

We should investigate https://tanstack.com/virtual/v3 which is used internally by material-react-table. Could this be used externally with how our table is set up? also link to material-react-table docs

[yusijs]

I fucked around and I found out a bit - I created a very basic example using the IntersectionObserver api. Made a codesandbox for it that loads and renders 5000 rows from jsonplaceholder.com. Not perfect but it does - at least partly - what I want it to. It's a bit jumpy on col-widths because native table-elements are an absolute PITA

https://codesandbox.io/s/confident-stitch-p98uni