logo svelte /headless table v6.0.13
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
0
rendered
0
visible
0–0
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