Skip to content
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

Closed
yusijs opened this issue Oct 7, 2022 · 6 comments · Fixed by #2664
Closed

Example of virtual scrolling in Table #2561

yusijs opened this issue Oct 7, 2022 · 6 comments · Fixed by #2664
Assignees

Comments

@yusijs
Copy link
Contributor

yusijs commented Oct 7, 2022

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
image

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

Additional context

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

@mimarz mimarz added the core-react eds-core-react label Oct 7, 2022
@mimarz
Copy link
Contributor

mimarz commented Oct 7, 2022

😂

@mimarz
Copy link
Contributor

mimarz commented Oct 11, 2022

Maybe we could use react-window for this?

@mimarz
Copy link
Contributor

mimarz commented Oct 11, 2022

Related issue #1909 & #2090

@martalalik
Copy link
Contributor

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
Copy link
Collaborator

oddvernes commented Oct 26, 2022

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
Copy link
Contributor Author

yusijs commented Oct 26, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants