-
Notifications
You must be signed in to change notification settings - Fork 66
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example of virtual scrolling in Table #2561
Comments
😂 |
Maybe we could use react-window for this? |
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). |
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 |
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 |
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.
The text was updated successfully, but these errors were encountered: