vue/compose-with-tanstack-virtual

Compose TanStack Vue Table with TanStack Virtual for row and column virtualization.

28.3k|3.6k|Updated Oct 20, 2016

Search Tags:#vue #virtualization #tanstack table #infinite scroll #virtual scrolling #ui performance #column virtualization

One-click install

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

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: vue/compose-with-tanstack-virtual
Source: https://github.com/TanStack/table/tree/main/packages/vue-table/skills/vue/compose-with-tanstack-virtual
Command: npx skills add https://github.com/TanStack/table --skill vue-compose-with-tanstack-virtual

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

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

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

FAQPage Schema

How do I render huge Vue tables without scroll jank and DOM overload?▼

Use Vue virtual scrolling to render only visible rows by applying a translateY transform, preventing DOM overload and keeping scrolling smooth for huge datasets.

Can I virtualize both rows and columns in a Vue datagrid?▼

Yes, column virtualization uses a horizontal virtualizer with left and right padding placeholders so visible columns stay stable during horizontal scroll in a Vue datagrid.

Does TanStack Vue Table support dynamic row heights during virtual scrolling?▼

Yes, dynamic row height handling uses measureElement to support variable-height rows, though you must account for Firefox measurement inconsistencies during virtual scrolling.

What is the best way to add infinite scrolling to a Vue virtualized table?▼

Pair virtual scrolling with useInfiniteQuery to fetch next pages when approaching the bottom, keeping ordering correct with manualSorting enabled for infinite feed patterns.

Do I need CSS grid for TanStack Vue virtual row positioning?▼

Yes, CSS grid combined with absolute positioning and translateY is required to satisfy scroll virtualization requirements and correctly position virtual rows in Vue.