solid/compose-with-tanstack-virtual

What problem does it solve?

This Skill solves the performance bottleneck of rendering massive datasets in a SolidJS data grid by virtualizing the visible rows instead of mounting every row.

Core Features & Use Cases

• Virtualize @tanstack/solid-table rows: Take rows from table.getRowModel().rows and only paint the subset currently in view.
• Integrate with @tanstack/solid-virtual: Use createVirtualizer with a reactive count (() => rows().length) and a scroll container ref.
• Support real-world behaviors: Keep sorting/filtering/grouping/expanding in the table while the virtualizer only controls which rows render.
• Use for wide and tall grids: Applies especially when you have very large row counts, dynamic row heights, or infinite scrolling patterns.

Quick Start

Ask an AI coding agent to implement Solid row virtualization for your @tanstack/solid-table by wiring createVirtualizer to your scroll container ref and rendering only virtualized rows in the <tbody> with absolute positioning and translateY.