lit/compose-with-tanstack-virtual

Virtualize TanStack Table rows in Lit using VirtualizerController and measureElement.

28.3k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill lit-compose-with-tanstack-virtual
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: lit/compose-with-tanstack-virtual
Source: https://github.com/TanStack/table/tree/main/packages/lit-table/skills/lit/compose-with-tanstack-virtual
Command: npx skills add https://github.com/TanStack/table --skill lit-compose-with-tanstack-virtual

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering thousands of Lit table rows becomes slow and unresponsive, especially when users need smooth scrolling in data-dense grids.

Core Features & Use Cases

  • Pair TanStack Table with virtualization: Use @tanstack/lit-virtual because TanStack Table itself does not virtualize rows or columns.
  • Virtualize the post-feature row model: Drive virtualization from table.getRowModel().rows so sorting, filtering, grouping, and pagination stay correct.
  • Drop-in Lit pattern for variable sizing: Use VirtualizerController alongside TableController, render only getVirtualItems(), and measureElement each virtual row.

Quick Start

Ask your AI assistant to show you how to wire VirtualizerController into your @tanstack/lit-table render loop using table.getRowModel().rows.length as the virtualizer count.

Frequently Asked Questions about lit/compose-with-tanstack-virtual

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

FAQPage Schema
How do I virtualize Lit table rows for smooth scrolling with large datasets?▼

To virtualize Lit table rows, combine the @tanstack/lit-table store with @tanstack/lit-virtual's VirtualizerController, rendering only virtual items with absolute positioning and syncing the virtualizer count to table.getRowModel().rows.length.

Does TanStack Table support row virtualization out of the box in Lit?▼

TanStack Table does not virtualize rows or columns natively. You need to pair it with @tanstack/lit-virtual by wiring the VirtualizerController into your Lit render loop.

How do I handle variable row heights when virtualizing a Lit datagrid?▼

For variable row heights in a virtualized Lit datagrid, use the measureElement function on each virtual row to dynamically measure and update sizing alongside the VirtualizerController.

Can I use sorting and filtering with a virtualized TanStack Table in Lit?▼

Yes, drive virtualization from the post-feature row model by syncing the virtualizer count to table.getRowModel().rows.length so sorting, filtering, grouping, and pagination stay correct.

What is the best way to render thousands of rows in a Lit table without lag?▼

The best way to render thousands of Lit table rows without lag is virtualization, constructing the virtualizer once and rendering only getVirtualItems() with absolute positioning to maintain smooth scrolling.

Do I need to configure overscanning for virtualized Lit tables?▼

Overscanning is supported and recommended for virtualized Lit tables to ensure smooth scrolling by rendering a buffer of rows outside the visible viewport area.