lit/compose-with-tanstack-virtual

Name: lit/compose-with-tanstack-virtual
Availability: InStock
Author: TanStack

Virtualize TanStack Table rows in Lit using VirtualizerController and measureElement.

28.3k|3.6k|Updated Oct 20, 2016

Search Tags:#performance #virtualization #tanstack table #scrolling #lit #render loop #virtualizer controller

Ready to run

npx skills add https://github.com/TanStack/table --skill lit-compose-with-tanstack-virtual

💬 Prompt for ChatGPT / Claude Chat▼

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.