# TanStack Virtual — Headless UI for Virtualizing Large Lists

> A headless, framework-agnostic library for efficiently rendering massive lists and grids by only mounting visible rows, supporting React, Vue, Solid, and Svelte.

## Install

Save in your project root:

# TanStack Virtual — Headless UI for Virtualizing Large Lists

## Quick Use
```bash
npm install @tanstack/react-virtual
```
```tsx
import { useVirtualizer } from '@tanstack/react-virtual';
const virtualizer = useVirtualizer({ count: 10000, getScrollElement: () => ref.current, estimateSize: () => 35 });
```

## Introduction
TanStack Virtual is a headless virtualization library that renders only the visible portion of large lists, tables, and grids. It keeps DOM node count low regardless of data size, preventing performance degradation when scrolling through thousands or millions of rows.

## What TanStack Virtual Does
- Virtualizes vertical lists, horizontal lists, and 2D grids
- Renders only visible items plus a configurable overscan buffer
- Supports dynamic row heights with automatic measurement
- Works with React, Vue, Solid, and Svelte via framework adapters
- Provides smooth scrolling with estimated sizes and measurement callbacks

## Architecture Overview
The core virtualizer is a framework-agnostic state machine that tracks the scroll container, calculates which items are visible, and returns measurement data. Framework adapters like `@tanstack/react-virtual` wrap this core with hooks or composables. The library does not render any DOM — it returns positional data (offset, size, index) that you apply to your own elements, making it fully headless.

## Self-Hosting & Configuration
- Install the adapter for your framework: `@tanstack/react-virtual`, `@tanstack/vue-virtual`, etc.
- Provide a scroll container ref, item count, and an `estimateSize` function
- Map over `virtualizer.getVirtualItems()` to render only visible rows
- Position items absolutely using the `start` offset from each virtual item
- Enable `measureElement` for dynamic sizes that adjust after render

## Key Features
- Renders only visible items for lists of any size without lag
- Supports variable and dynamic item heights with auto-measurement
- Horizontal and grid virtualization for two-dimensional layouts
- Headless design gives full control over markup and styling
- Tiny bundle size with zero dependencies beyond the TanStack core

## Comparison with Similar Tools
- **react-window** — React-only, with fixed and variable size list components; TanStack Virtual is headless and multi-framework
- **react-virtualized** — older, larger library with many features; TanStack Virtual is lighter and more modern
- **vue-virtual-scroller** — Vue-specific; TanStack Virtual supports Vue, React, Solid, and Svelte
- **Virtua** — newer alternative with similar goals; TanStack Virtual has deeper TanStack ecosystem integration
- **Native scroll** — works for small lists but chokes on 10K+ items; virtualization is essential at scale

## FAQ
**Q: What frameworks are supported?**
A: React, Vue, Solid, and Svelte each have dedicated adapter packages.

**Q: Can I virtualize a grid?**
A: Yes. Create two virtualizers (row and column) and combine their measurements for 2D virtualization.

**Q: Does it handle dynamic row heights?**
A: Yes. Pass `measureElement` to measure items after rendering and the virtualizer adjusts automatically.

**Q: How does it compare to react-window?**
A: TanStack Virtual is headless, supports multiple frameworks, and handles dynamic sizes more naturally.

## Sources
- https://github.com/TanStack/virtual
- https://tanstack.com/virtual

---
Source: https://tokrepo.com/en/workflows/asset-3404f139
Author: AI Open Source