skills.rest
TaherMustansir1929
TaherMustansir1929COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tanstack-virtual

Virtualize large lists and grids to render only visible items.

Updated Apr 4, 2026
Search Tags:#performance#react#virtualization#grid#infinite-scroll#windowing#virtual-list
One-click install
npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-virtual-tahermustansir1929
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/TaherMustansir1929/zainy-water-v3/tree/main/.agents/skills/tanstack-virtual
Command: npx skills add https://github.com/TaherMustansir1929/zainy-water-v3 --skill tanstack-virtual-tahermustansir1929

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Virtualizing long lists, grids, and tables to avoid rendering offscreen DOM nodes and to maintain smooth scrolling and low memory usage even with very large datasets.

Core Features & Use Cases

  • Minimal DOM footprint: Calculates visible items and positions them absolutely so the number of DOM nodes stays small regardless of data size.
  • Flexible layouts: Supports vertical and horizontal lists, multi-lane grids, and combined row/column virtualizers for grids.
  • Dynamic sizes & measurement: Handles variable item heights via element measurement and data-index attributes for accurate sizing.
  • Advanced behaviors: Includes overscan, sticky items, window scrolling support, scroll-to APIs, smooth scrolling, and infinite-loading patterns.
  • Use Case: Replace a paginated table with a virtualized grid that smoothly scrolls through tens of thousands of rows while loading additional pages on demand.

Quick Start

Install @tanstack/react-virtual and use useVirtualizer with a scroll container, count, getScrollElement, and estimateSize to render only visible rows.

Frequently Asked Questions about tanstack-virtual

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

FAQPage Schema
How do I render huge lists in React without freezing the browser?▼

Virtualizing huge lists in React prevents browser freezing by rendering only visible items and positioning them absolutely. This minimizes DOM nodes and maintains smooth 60FPS scrolling regardless of dataset size.

Can I virtualize a grid with dynamic row heights in TypeScript?▼

Yes, you can virtualize grids with dynamic row heights in TypeScript by using element measurement and data-index attributes. The virtualizer accurately sizes variable items to maintain correct scroll positioning.

Does Tanstack Virtual work with Vue, Svelte, and Angular frameworks?▼

Tanstack Virtual works across multiple frameworks including Vue, Svelte, Angular, Solid, and Lit. It applies core virtualization logic to TypeScript and JavaScript applications universally.

What's the best way to implement infinite scroll loading for large datasets?▼

The best way to implement infinite scroll loading is by combining a virtualizer with scroll-to APIs. This setup renders visible items while loading additional pages on demand as the user scrolls.

Why does my virtualized list scroll position jump when items have variable sizes?▼

Virtualized list scroll positions jump when item sizes rely on estimates rather than actual measurement. You must configure dynamic measurement via data-index attributes to accurately size elements and prevent jumping.

Do I need a scroll container reference to virtualize a list?▼

Yes, you need a scroll element reference to virtualize a list. You must configure the total item count, provide the scroll container reference, and set a size estimation for the virtualizer to function.

Related Skills

Explore More Software Engineering Skills→
janpeterdjanpeterd

tanstack-virtual

Virtualize viewport-visible items in large React lists with TanStack Virtual.

Community
Intermediate
mohamedgshoaibmohamedgshoaib
5

tanstack-virtual

Provide headless virtualization logic for rendering visible items in large lists.

Community
Intermediate
SemkooSemkoo
55

niko-table-best-practices

Integrate Niko Table components into React projects for shadcn-compatible data tables.

Community
Advanced
TanStackTanStack
28.3k

vue/compose-with-tanstack-virtual

Compose TanStack Vue Table with TanStack Virtual for row and column virtualization.

Official
Advanced