vue/getting-started

Guide building a first TanStack Vue v9 table with feature and row-model wiring.

28.3k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill vue-getting-started
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue/getting-started
Source: https://github.com/TanStack/table/tree/main/packages/vue-table/skills/vue/getting-started
Command: npx skills add https://github.com/TanStack/table --skill vue-getting-started

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Vue users need a clear, end-to-end path to assemble a minimal v9 table correctly—especially the required v9 wiring of _features, _rowModels, column helper generics, and <FlexRender> rendering.

Core Features & Use Cases

  • Create a working minimal table: establish stable _features via tableFeatures({}), provide required _rowModels: {}, define columns with createColumnHelper using both generics, and render headers/cells with FlexRender.
  • Add a feature the v9 way: enable sorting by registering rowSortingFeature in _features and wiring sortedRowModel with its required sortFns parameter so APIs like getToggleSortingHandler and getIsSorted are available.
  • Compose multiple features: build sorting + filtering + pagination by layering features in _features and stacking matching row model factories in _rowModels for state-transition APIs to work.

Quick Start

Use the getting-started setup to install @tanstack/vue-table, declare _features and _rowModels in your Vue component, define columns with createColumnHelper using both generics, then instantiate useTable and render headers and cells with FlexRender.

Frequently Asked Questions about vue/getting-started

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

FAQPage Schema
How do I create a working TanStack Vue table from scratch?

Create a working TanStack Vue table by declaring _features via tableFeatures, providing required _rowModels factories, defining columns with createColumnHelper using TFeatures then TData generics, and rendering headers and cells with FlexRender.

How do I add sorting to a TanStack Vue v9 table?

Add sorting to a TanStack Vue v9 table by registering rowSortingFeature in _features and wiring sortedRowModel with its required sortFns parameter, enabling APIs like getToggleSortingHandler and getIsSorted.

Can I combine sorting, filtering, and pagination in a Vue 3 datagrid?

You can combine sorting, filtering, and pagination in a Vue 3 datagrid by layering multiple features in _features and stacking matching row model factories in _rowModels to ensure state-transition APIs work correctly.

Why does my FlexRender component not display table headers in Vue?

FlexRender fails to display Vue table headers when _features and _rowModels are incorrectly wired. Ensure you define columns with createColumnHelper using both generics and pass header groups and row model cells to FlexRender.

What's the best way to structure column definitions in TanStack Vue Table?

The best way to structure column definitions in TanStack Vue Table is using createColumnHelper with both TFeatures and TData generics, ensuring the column helper recognizes feature APIs and typed row data.