Frontend & UISûr100100/100
Migrate V8 To V9 (TanStack) — React Table
Migrate react Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill.
ou envoie-le directement à ton agent.
Installer dans ton projet
$ curl -fsSL https://arboristhree.xyz/cli/install-skill.mjs -o /tmp/arboris-install-skill.mjs && node /tmp/arboris-install-skill.mjs migrate-v8-to-v9__tanstack-table__packages-react-table-skills-c8024520ff98TanStack
TanStack/table
Contenu à copier
--- name: migrate-v8-to-v9 description: Migrate react Table v8 to v9. Audit framework construction, rendering, state, and app hooks, with shared API changes in the core migration skill. metadata: origin: TanStack type: lifecycle library: '@tanstack/react-table' library_version: '9.3.1' framework: react requires: - '@tanstack/table-core#migrate-v8-to-v9' sources: - TanStack/table:docs/framework/react/guide/migrating.md - TanStack/table:packages/react-table/src/index.ts - TanStack/table:packages/react-table/src/legacy.ts - TanStack/table:examples/react/basic-use-table --- # 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](references/adapter-migration.md) before editing it. For a replacement render scaffold, read [getting started](../getting-started/SKILL.md). For controlled or stale state after migration, read [table state](../table-state/SKILL.md). 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.
Colle ce Markdown dans ton agent ou utilise les boutons ci-dessus pour l’écrire dans ton projet.
Ce que fait Migrate V8 To V9 (TanStack) — React Table
[ ] 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.
Comment utiliser Migrate V8 To V9 (TanStack) — React Table
1
Copie le prompt
Un clic copie le prompt packagé (ou l'envoie à ton agent).
2
L'agent installe le skill
Il ajoute le SKILL.md et ses ressources à ton projet.
3
Activation automatique
Le skill s'active dès que le contexte correspond.
Déclencheurs pour Migrate V8 To V9 (TanStack) — React Table
Dis simplement à ton agent quelque chose comme :
Applique le skill migrate-v8-to-v9__tanstack-table__packages-react-table-skills-c8024520ff98 à cette tâche
Utilise migrate-v8-to-v9__tanstack-table__packages-react-table-skills-c8024520ff98 pour améliorer cette implémentation
Passe en revue ce sujet avec migrate-v8-to-v9__tanstack-table__packages-react-table-skills-c8024520ff98
Skills liés à Migrate V8 To V9 (TanStack) — React Table
accessibility
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast, target size, and screen-reader support. Use when building or auditing UI for accessibility compliance, keyboard navigation, or screen-reader support.Accessibility Pass (Microsoft)
Use this skill whenever the user asks to check, review, or fix the accessibility of a PowerPoint deck, Word document, HTML page, or Markdown file, and before handing over any deck or document this agent just generated, so it does not ship with missing alt text, untitled slides, or unreadable colour contrast.Add Connector (Microsoft)
Use when adding a Power Platform connector to an Expo/React Native Power Apps mobile app and no dedicated mobile connector skill exists.