logo svelte /headless table v7.0.1
FIG-001/ VIRTUALIZE

render thousands.

A 10,000-row table that mounts only the viewport-visible rows. Sorting, filtering, and pagination still see every row — but the DOM stays small.

  • addVirtualScroll measures the scroll container and produces a thin window of visibleRows — your render loop iterates that instead of the full dataset.
  • Spacer rows above and below the window hold the scrollbar position, so a 10,000-row table still scrolls naturally even with 30 rows mounted.
  • Sorting and filtering still iterate the full dataset — they're upstream of the windowing layer — so derived totals stay correct.
↩ all examples
pattern · windowed rendering mode · live running source
Load rows
Jump to row
State
total
1,000
rendered
10
visible
0–10
loading
no

scroll the panel to trigger infinite loading, or hit one of the size buttons above to load a large dataset instantly.

ID Name Email Company Department Salary
0Alice Smithalice.smith0@example.comAcme CorpEngineering$30,000
1Bob Davisbob.davis1@example.comTechStartSales$31,234
2Carol Jonescarol.jones2@example.comGlobal IncMarketing$32,468
3David Johnsondavid.johnson3@example.comDataFlowHR$33,702
4Emma Wilsonemma.wilson4@example.comCloudNineFinance$34,936
5Frank Garciafrank.garcia5@example.comByteWorksOperations$36,170
6Grace Williamsgrace.williams6@example.comNetSphereLegal$37,404
7Henry Moorehenry.moore7@example.comCodeBaseSupport$38,638
8Ivy Millerivy.miller8@example.comAcme CorpEngineering$39,872
9Jack Brownjack.brown9@example.comTechStartSales$41,106
category · virtualize
sheet · sheet 01 / 01
⟳ to re-run

Virtual Scroll