tanstack-virtual

Name: tanstack-virtual
Availability: InStock
Author: Montte

Virtualize large lists with useVirtualizer to render only visible items.

6|4|Updated Nov 1, 2025

Search Tags:#react #tanstack #angular #vue #virtualization #frontend-performance #virtualizer

Ready to run

npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-virtual-montte-erp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/Montte-erp/montte-nx/tree/main/.agents/skills/tanstack-virtual
Command: npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-virtual-montte-erp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Efficiently renders only visible items in large lists, grids, and tables to reduce DOM size and improve scroll performance.

Core Features & Use Cases

Virtualization logic that calculates visible items and positions them with absolute positioning
Supports multiple frameworks via TanStack Virtual core: React, Vue, Solid, Svelte, Lit, Angular
Handles dynamic heights, horizontal layouts, and grid-like scenarios for massive datasets

Quick Start

Install @tanstack/virtual and integrate useVirtualizer to render only visible items in your list.

Frequently Asked Questions about tanstack-virtual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render large lists in React without dropping scroll performance?▼

Virtualization renders only visible items in large lists to reduce DOM size and improve scroll performance. It calculates visible items and positions them with absolute positioning to maintain 60FPS scrolling in React applications.

Does TanStack Virtual support frameworks other than React for list virtualization?▼

TanStack Virtual supports list virtualization across React, Vue, Solid, Svelte, Lit, and Angular. It provides framework-agnostic core logic to calculate visible items and position them for efficient scrolling in any supported framework.

Can I virtualize lists with dynamic item heights in frontend applications?▼

Dynamic item heights are supported in virtualized lists using TanStack Virtual. The virtualizer handles dynamic measurements alongside the count, getScrollElement, and estimateSize API requirements to accurately position variable-height items during scroll.

What is the best way to virtualize large grids and tables with horizontal layouts?▼

Virtualizing large grids and tables is best handled by applying horizontal layout modes in TanStack Virtual. It supports both vertical and horizontal orientations to efficiently render massive datasets in grid-like scenarios.

Why does my frontend application lag when scrolling massive datasets in a table?▼

Frontend applications lag during scroll because rendering massive datasets creates an excessively large DOM. Virtualization solves this by calculating and rendering only the visible items, applying absolute positioning to maintain smooth 60FPS performance.

Do I need to specify an estimated size when using a virtualizer for large lists?▼

Specifying an estimated size is required when using a virtualizer for large lists. The estimateSize parameter, along with count and getScrollElement, satisfies the core API usage requirements needed to calculate visible item positioning.