vue/compose-with-tanstack-virtual

What problem does it solve?

Rendering thousands of rows in a Vue TanStack Table causes slow performance and scroll jank because the browser has to paint every row.

Core Features & Use Cases

• Row virtualization with TanStack Virtual: Render only the visible row slice by using a row virtualizer driven by rows.length and getVirtualItems(), then position rows with transform: translateY(start)px.
• Column virtualization: Virtualize columns horizontally using a horizontal virtualizer plus left/right padding placeholders so visible columns don’t “slide” during horizontal scroll.
• Dynamic row height handling: Optionally use measureElement to support variable-height rows while avoiding Firefox measurement inconsistencies.
• Infinite scrolling integration: Pair virtual scrolling with useInfiniteQuery and fetch the next page when the user approaches the bottom, keeping ordering correct with manualSorting: true.
• Use Case: Build a high-performance datagrid for 50,000+ records (or an infinite feed) while preserving TanStack Table features like sorting, filtering, grouping, and selection.

Quick Start

Use the vue/compose-with-tanstack-virtual skill to set up @tanstack/vue-table with @tanstack/vue-virtual by creating a deepest leaf component that owns useVirtualizer, then render only virtualRows with absolute positioning and grid-based table layout.