Frontend & UISûr100100/100
Migrate V8 To V9 (TanStack) — Vue Table
Migrate vue 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-vue-table-skills-40cf07c2c28aTanStack
TanStack/table
Contenu à copier
--- name: migrate-v8-to-v9 description: Migrate vue 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/vue-table' framework: vue library_version: '9.3.1' requires: - '@tanstack/table-core#migrate-v8-to-v9' sources: - TanStack/table:docs/framework/vue/guide/migrating.md - TanStack/table:packages/vue-table/src/index.ts - TanStack/table:examples/vue/basic-use-table --- # Vue 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 Vue-specific changes. Framework prerequisite: Vue 3.2 or newer (`vue >=3.2`). ## Adapter audit - [ ] Replace `useVueTable` with `useTable` and preserve ref/computed/getter inputs. - [ ] Keep features and columns stable, configure explicit features/row-model slots, and complete the shared core checklist. - [ ] Replace `getState()` with tracked atom reads or intentional whole-store reads. Use `computed` for derived template values. - [ ] Pair controlled reactive values with callbacks that resolve both updater forms, or supply stable Vue Store atoms. Remove global `onStateChange`. - [ ] Replace deprecated `table.Subscribe` calls with native reactive reads. Use a child component when you need to preserve a separate component render boundary. - [ ] Adopt FlexRender cell/header/footer shorthand; the old render/props shape remains supported. - [ ] Use `tableOptions` or `createTableHook` only for repeated conventions and explicit context-hook export types when needed to break circular inference. ## Load the affected details When the audit finds old Vue 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 `useVueTable` 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. ## API discovery Inspect `node_modules/@tanstack/vue-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) — Vue Table
[ ] Replace `useVueTable` with `useTable` and preserve ref/computed/getter inputs.
[ ] Keep features and columns stable, configure explicit features/row-model slots, and complete the shared core checklist.
[ ] Replace `getState()` with tracked atom reads or intentional whole-store reads. Use `computed` for derived template values.
[ ] Pair controlled reactive values with callbacks that resolve both updater forms, or supply stable Vue Store atoms. Remove global `onStateChange`.
Comment utiliser Migrate V8 To V9 (TanStack) — Vue 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) — Vue Table
Dis simplement à ton agent quelque chose comme :
Applique le skill migrate-v8-to-v9__tanstack-table__packages-vue-table-skills-40cf07c2c28a à cette tâche
Utilise migrate-v8-to-v9__tanstack-table__packages-vue-table-skills-40cf07c2c28a pour améliorer cette implémentation
Passe en revue ce sujet avec migrate-v8-to-v9__tanstack-table__packages-vue-table-skills-40cf07c2c28a
Skills liés à Migrate V8 To V9 (TanStack) — Vue 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.