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

Add Client side lazy load on scroll. #214

Open
zommerberg opened this issue Apr 15, 2024 · 1 comment
Open

Add Client side lazy load on scroll. #214

zommerberg opened this issue Apr 15, 2024 · 1 comment

Comments

@zommerberg
Copy link

zommerberg commented Apr 15, 2024

I've noticed that the table's performance degrades significantly when it contains over 1,000 items.

Is it possible to add onscroll lazy load plugin? This would allow the table to initially load only a specific number of items, and then load additional content progressively as the user scrolls down.

I know there already is pagination but would be possible to have a scroll lazy load pagination?

@moalamri
Copy link

I had this issue and solved it by making a row component with Intersection Observer

Here's a 10,000 rows table example with the observer component.
https://svelte.dev/repl/c6c0c1e31b864019bc273e3b536af1b4?version=3.48.0

Notes:

  • As in the example, a <div> placeholder is required to have the correct scrollbar size (for some reason if I use <tr> it becomes a little bit slow)
  • I'm not sure if it is required to unobserve and disconnect but added them anyways.

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

No branches or pull requests

2 participants