react/compose-with-tanstack-virtual

What problem does it solve?

This Skill prevents browser freezes when TanStack Table renders extremely large datasets by virtualizing which rows (and optionally columns) are actually mounted in the DOM.

Core Features & Use Cases

• Row virtualization for large datasets: Uses useVirtualizer with getVirtualItems() so only visible rows render, avoiding rendering tens of thousands of <tr> elements.
• Deepest-component virtualizer placement: Keeps useVirtualizer in the most deeply nested component (e.g., a TableBody) to preserve scroll position and avoid remeasurement churn.
• Column virtualization + padding placeholders: Supports horizontal: true with left/right placeholder cells to keep scroll width and alignment correct.
• Infinite scroll integration: Combines virtualization with useInfiniteQuery and requires server-side sorting via manualSorting: true to avoid row order scrambling.

Quick Start

Use the skill to implement row virtualization by placing useVirtualizer inside your TableBody, using rows.length for count, rendering only rowVirtualizer.getVirtualItems(), and positioning each virtual row with transform: translateY(virtualRow.start)px while making the <tbody> a grid with a fixed total height.