skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

vue/migrate-v8-to-v9

Migrate @tanstack/vue-table v8 code to v9 APIs and row models.

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#vue#migration#breaking changes#tanstack-table#row models#table state#FlexRender
One-click install
npx skills add https://github.com/TanStack/table --skill vue-migrate-v8-to-v9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue/migrate-v8-to-v9
Source: https://github.com/TanStack/table/tree/main/packages/vue-table/skills/vue/migrate-v8-to-v9
Command: npx skills add https://github.com/TanStack/table --skill vue-migrate-v8-to-v9

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of breaking-change migrations when upgrading @tanstack/vue-table from v8 to v9 by converting old APIs into the new v9 table construction model.

Core Features & Use Cases

  • Mechanical API Renames: Replace useVueTable with useTable, sortingFn/sortingFns with sortFn/sortFns, and remove legacy underscore-prefixed methods.
  • Row Model and Feature Wiring: Move getXRowModel options into _rowModels factories and register every used feature via tableFeatures({...}) through a mandatory _features object.
  • State and Rendering Updates: Replace table.getState() reads with table.store.state/table.state/table.atoms.<slice>.get(), and migrate FlexRender usage to the v9 :cell/:header/:footer shape.
  • Use Case: Upgrading a production Vue app that currently builds tables with v8 patterns (useVueTable + getSortedRowModel/getCoreRowModel + table.getState + legacy FlexRender props) so it compiles and behaves correctly in v9.

Quick Start

Run the migration by rewriting your Vue table setup according to the v8-to-v9 rename cheat sheet, updating _features/_rowModels, switching state reads away from table.getState(), and changing FlexRender to the preferred v9 :cell format.

Frequently Asked Questions about vue/migrate-v8-to-v9

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

FAQPage Schema
How do I migrate TanStack vue-table from v8 to v9?▼

Migrate vue-table v8 to v9 by replacing useVueTable with useTable, registering table features via tableFeatures, moving row model options into _rowModels factories, and updating FlexRender to the v9 cell format.

What breaking changes were introduced in TanStack vue-table v9?▼

Breaking changes in vue-table v9 include mandatory _features registration, _rowModels factories replacing getXRowModel options, and renamed APIs like sortFn replacing sortingFn to ensure table correctness.

How do I update table state reads after upgrading vue-table to v9?▼

Update table state reads by replacing table.getState() with v9 alternatives like table.store.state, table.state, or table.atoms.<slice>.get() to access reactive state slices directly.

Do I need to register table features manually when upgrading vue-table?▼

Yes, manual feature registration is required in v9 by passing features through a mandatory _features object in tableFeatures to ensure table construction includes all required row models and sorting functions.

How do I convert column helper generics for vue-table v9?▼

Convert column helper generics for vue-table v9 by updating the createColumnHelper arity and adjusting column definitions to align with the new table construction model and feature registration requirements.

Why is my FlexRender component not working after upgrading vue-table to v9?▼

FlexRender fails in v9 because legacy props were removed; migrate to the preferred v9 :cell, :header, and :footer shape to restore proper rendering of table elements.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

lit/migrate-v8-to-v9

Migrate TanStack Table for Lit from v8 to v9 APIs.

Official
Advanced
TanStackTanStack
28.3k

svelte/migrate-v8-to-v9

Migrate TanStack Svelte Table v8 apps to the v9 Svelte 5 rune-based API.

Official
Advanced
ariesanhthuariesanhthu

vue-expert

Diagnose Vue 3 reactivity issues and optimize Nuxt.js performance.

Community
Advanced
TanStackTanStack
28.3k

angular/migrate-v8-to-v9

Migrate @tanstack/angular-table code from v8 to v9 with mechanical translation patterns.

Official
Intermediate