Skills
.Work. You
Rest

preact/compose-with-tanstack-virtual

Official

Virtualize huge Preact tables without adapters

Software Engineering#performance#preact#virtualization#tanstack table#virtualizer#tanstack virtual
AuthorTanStack
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill solves the performance bottleneck of rendering thousands of rows in a Preact datagrid by showing how to virtualize rendering while keeping TanStack Table as the source of truth.

Core Features & Use Cases

  • Row and column virtualization guidance: Pair TanStack Table with TanStack Virtual (via @tanstack/virtual-core) to render only visible items.
  • Correct integration with table features: Feed the virtualizer with table.getRowModel().rows.length so sorting/filtering/pagination/grouping are respected.
  • Variable sizing support: Use measureElement and estimateSize to prevent overlaps/gaps when row heights differ.

Quick Start

Ask your coding agent to implement row virtualization in Preact by creating a Virtualizer from @tanstack/virtual-core, using rows = table.getRowModel().rows for count, rendering virtualizer.getVirtualItems(), and positioning each row with transform: translateY(...).

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: preact/compose-with-tanstack-virtual
Download link: https://github.com/TanStack/table/archive/main.zip#preact-compose-with-tanstack-virtual

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.