tanstack-virtual

This skill is a focused technical reference for TanStack Virtual, a headless UI library for virtualizing large lists, grids, and tables so that only the items currently in the viewport are rendered. It solves the performance problem of rendering thousands or millions of DOM nodes by calculating which items are visible and positioning them with absolute positioning, keeping the DOM node count minimal regardless of dataset size and targeting smooth 60FPS scrolling. It covers the React binding (@tanstack/react-virtual) built on the framework-agnostic core (@tanstack/virtual-core), which also supports TS/JS, Vue, Solid, Svelte, Lit, and Angular.

The reference walks through installation and the core useVirtualizer pattern, then documents required options (count, getScrollElement, estimateSize) and a full table of optional options such as overscan, horizontal, gap, lanes, padding, initialOffset, getItemKey, rangeExtractor, scrollToFn, measureElement, and onChange. It documents the virtualizer API (getVirtualItems, getTotalSize, scrollToIndex, scrollToOffset, measure) and the VirtualItem shape. Practical patterns include dynamic/variable heights via the measureElement ref with data-index, horizontal virtualization using translateX, two-virtualizer grid virtualization, and window scrolling with useWindowVirtualizer.

The target users are frontend engineers, primarily React developers but also those on other supported frameworks, who need to render very large scrollable datasets performantly. Typical use cases include infinite lists, data grids and tables, masonry layouts using lanes, and any UI where DOM size would otherwise degrade scroll performance.