svelte/compose-with-tanstack-virtual

What problem does it solve?

TanStack Table renders the full row model for your grid, which can become slow and heavy when you have thousands of rows or expensive per-row markup. This skill shows how to pair TanStack Table with TanStack Virtual so only the visible window is rendered.

Core Features & Use Cases

• Row virtualization with TanStack Virtual: Render only $rowVirtualizer.getVirtualItems() and position rows with transform: translateY(...) inside a container sized by getTotalSize().
• Dynamic row heights support: Use measureElement to handle variable-height rows (and guard against Firefox measurement quirks).
• Additional patterns: Apply the same approach for horizontal (column) virtualization and implement infinite scrolling by loading more when nearing the end.

Quick Start

Ask your agent to explain and implement row virtualization by combining table.getRowModel().rows with createVirtualizer in Svelte, then rendering only the virtual items positioned by translateY within a fixed-height scroll container.