Skip to content

[6.x] Upgrade TanStack Table to v9 - #19718

Merged
brandonkelly merged 7 commits into
6.xfrom
update-tanststack-table
Oct 2, 2026
Merged

brandonkelly merged 7 commits into
6.xfrom
update-tanststack-table

Conversation

@brianjhanson

Copy link
Copy Markdown
Contributor

Upgrades @tanstack/vue-table and @tanstack/table-core from 8.21.3 to 9.2.4, then moves CP tables onto v9's createTableHook.

Upgrade (0b2a1e59e0)

v9 is a breaking rewrite:

  • Shared feature set. v9 only adds a feature's APIs (sorting, selection, pagination…) to tables that register it. Every CP table renders through DataTable/BaseElementIndex, which use all of them, so every table registers the same set: column ordering/sizing/visibility plus row pagination/selection/sorting. No client-side row models are registered, since sorting and pagination happen on the server.
  • useVueTable → useTable; getCoreRowModel is gone; table.getState().x → table.atoms.x.get(). Our getter-based data/state options are still tracked reactively by the v9 Vue adapter.
  • Select-all fix. getIsSomeRowsSelected() now includes the all-selected case, so the header checkbox also checks !getIsAllRowsSelected() before showing as indeterminate.
  • Types. Table, row, column and column-def types gain a features generic. v9 tables are invariant in their row type (Table<any> no longer accepts every table), so AdminTable, BaseElementIndex and DataTable are now generic over TData extends Record<string, any>. Stories and one test use the repo's existing casts for generic SFCs.
  • RowSelectionState is now Record<string, true>; useAssetFolderActions narrows folderName now that the active index table has its real row type.

createTableHook refactor (4ef0d51ba1)

  • New modules/admin-table/craftTable.ts exports useCraftTable, so a table only passes { data, columns, … }.
  • Behavior change: sorting is off by default. useServerSort switches it back on. The user groups, plugins, migrations and queue manager tables showed sort buttons that flipped the arrow but never reordered rows (the same in v8); those buttons are now gone. Tables that do sort are unaffected.
  • Column meta is typed through a columnMeta slot instead of global declaration merging in globals.d.ts.
  • createCraftColumnHelper is used everywhere; DataTable uses the <FlexRender :header> / :cell shorthand.

Testing

  • pnpm typecheck: 0 errors. pnpm lint:js: warnings only, none on changed lines.
  • pnpm test: 1084 pass, 12 fail. The 12 failures are in 5 files that don't use tables (upload client, ElementSelectControl, dashboard widget settings, NewEntryButton, WorkflowStagesInput), and the same tests fail on an untouched 6.x checkout.
  • New craftTable.test.ts covers the sorting default and the server-sort opt-in.
  • Clicked through index tables manually after the upgrade.

🤖 Generated with Claude Code

brianjhanson and others added 2 commits September 25, 2026 16:04
Moves @tanstack/vue-table and @tanstack/table-core from 8.21.3 to 9.2.4.

- Register a shared feature set (craftTableFeatures) for every CP table,
  since v9 only exposes a feature's APIs to tables that register it
- useVueTable -> useTable, drop getCoreRowModel, read state via atoms
- Add the feature-set generic to column helpers, types and ColumnMeta
- Make AdminTable/BaseElementIndex/DataTable generic over the row type,
  as v9 tables are invariant in their data type
- Keep the select-all checkbox from showing indeterminate when every row
  is selected (getIsSomeRowsSelected now includes the all-selected case)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Add useCraftTable (createTableHook) with the shared features and
  defaults, replacing per-table `features` wiring
- Default to enableSorting: false; useServerSort opts tables back in.
  Tables with no sorting wired up no longer show sort buttons that
  did nothing
- Type column meta through a columnMeta slot instead of global
  declaration merging
- Use createCraftColumnHelper everywhere and the FlexRender shorthand

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions

github-actions Bot commented Sep 26, 2026 •

Copy link
Copy Markdown

📚 Storybook previews

@craftcms/ui — open Storybook

No changed components detected in this Storybook.

resources/js — open Storybook

No changed components detected in this Storybook.

@brianjhanson brianjhanson changed the title Upgrade TanStack Table to v9 [6.x] Upgrade TanStack Table to v9 Sep 30, 2026
@brianjhanson
brianjhanson marked this pull request as ready for review October 1, 2026 14:25
# Conflicts:
#	resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue
@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown

This PR had conflicts with 6.x. Claude attempted an automatic resolution and pushed a merge commit. Please review the merge commit carefully before approving/merging.

Claude's response

I resolved the one conflict and committed the merge as 454859b. I didn't push and didn't run any lint or build checks beyond confirming that no conflict markers remain.

Changed

  • resources/js/modules/forms/nested-elements/NestedElementBlocksControl.vue: both sides edited the wrapper around the "create" button.
    • This branch changed the spacing class from mt-3 to the mt-md spacing token.
    • 6.x renamed the component from NestedEntriesCreateButton to NestedElementsCreateButton.
    • These changes don't overlap, so I kept both: mt-md and NestedElementsCreateButton.
    • The file's import already points to NestedElementsCreateButton.vue, and no other file in resources/js uses the old name.

Found
Nothing ambiguous, so I added no CONFLICT-REVIEW comments.

@brandonkelly
brandonkelly merged commit 499ba67 into 6.x Oct 2, 2026
9 checks passed
@brandonkelly
brandonkelly deleted the update-tanststack-table branch October 2, 2026 22:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants