# Virtual Scroll
> Virtualised row rendering for tens of thousands of rows — only the viewport-visible window mounts in the DOM while sorting and pagination still apply across the full dataset.
**Source:** [https://table.svelte.page/examples/virtual-scroll](https://table.svelte.page/examples/virtual-scroll)
**Markdown mirror:** [https://table.svelte.page/examples/virtual-scroll.md](https://table.svelte.page/examples/virtual-scroll.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `VIRTUALIZE` | pattern: `windowed rendering`
### Notes
- `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.
### Source
#### Default.svelte
Source file: [src/lib/examples/virtual-scroll/demos/Default.svelte](https://github.com/humanspeak/svelte-headless-table/blob/main/docs/src/lib/examples/virtual-scroll/demos/Default.svelte)
```svelte
scroll the panel to trigger infinite loading, or hit one of the size buttons above to load a large
dataset instantly.
{#each $headerRows as headerRow (headerRow.id)}
{#each headerRow.cells as cell (cell.id)}
|
{#if props.sort.order === 'asc'}
{:else if props.sort.order === 'desc'}
{/if}
|
{/each}
{/each}
{#if $topSpacerHeight > 0}
|
{/if}
{#each $pageRows as row (row.id)}
{#each row.cells as cell (cell.id)}
|
|
{/each}
{/each}
{#if $bottomSpacerHeight > 0}
|
{/if}
{#if $isLoading}
| loading more rows… |
{/if}
```