mcpField
M
migrate-v8-to-v9

migrate-v8-to-v9

github.com/tanstackDevelopment28.5k46 installsUpdated 1w ago
Repository

About migrate-v8-to-v9

migrate-v8-to-v9 is a React-specific checklist for moving an application from the TanStack Table v8 adapter to v9. It supplements the core migration checklist with adapter, state subscription, rendering, and verification steps.

Key features

  1. 01Audits React adapter API replacements
  2. 02Checks stable model inputs and row-model slots
  3. 03Migrates state subscriptions and updater callbacks
  4. 04Reviews rendering methods and app hooks
  5. 05Verifies types and feature flows

Use cases

  1. 01Planning a React app's v8-to-v9 migration
  2. 02Reviewing affected state and rendering code
  3. 03Testing client and manual feature flows after migration

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tanstack/table --skill migrate-v8-to-v9

After installing, type/migrate-v8-to-v9in Claude Code to confirm it loaded.

Bundled filesreferences/adapter-migration.md

Details

From the project README

React v8-to-v9 migration checklist

Before starting, run intent load @tanstack/table-core#migrate-v8-to-v9. Audit its entire shared checklist and read the detailed core mappings for APIs present in the application. This checklist adds the React-specific changes.

Framework prerequisite: React 18 or newer (react >=18).

Adapter audit

  • Replace useReactTable with useTable; remove any temporary useLegacyTable from @tanstack/react-table/legacy.
  • Keep model inputs stable and use explicit tableFeatures plus its row-model slots. Audit every shared change through the core checklist.
  • Replace render reads with selected table.state, table.Subscribe, or useSelector. Atom/store snapshots alone do not subscribe React.
  • Pair each controlled state slice with its updater callback, or supply a stable React Store atom. Remove the global onStateChange option.
  • Check compiler-memoized children hiding builder-method reads; subscribe inside the child or pass the selected value to it.
  • Use table.FlexRender or standalone FlexRender where appropriate; flexRender remains supported.
  • Introduce tableOptions or createTableHook only for repeated conventions; preserve app wrapper and typed-context boundaries.

Load the affected details

When the audit finds old React construction, state, rendering, or app-hook code, read adapter migration details before editing it. For a replacement render scaffold, read getting started. For controlled or stale state after migration, read table state.

Shared pinning, sizing, sorting, selection, prototype-method, type, and registry changes stay in the core migration references. Renaming useReactTable alone does not complete the migration.

Verify the migration

  • Type-check against the installed v9 adapter and exercise every enabled client/manual feature flow.
  • Verify external state writes, reactive data replacement, and the framework rendering paths changed above.
  • Complete the core checklist, including layout and selection behavior when those features are used.
  • Replace temporary stockFeatures when the target is explicit feature tree-shaking and remove useLegacyTable.

API discovery

Inspect node_modules/@tanstack/react-table/dist/index.d.ts and the exported adapter declarations. Use node_modules/@tanstack/table-core/dist/index.d.ts for shared APIs.

Comments

Markdown supported