Migrate TanStack Table from v8 to v9 - #1145
Draft
lamberto15 wants to merge 5 commits into
Draft
Conversation
Upgrades @tanstack/react-table from ^8.21.3 to ^9.1.2 and adopts the new v9 API: explicit feature registration via tableFeatures(), useTable(), and metaHelper() instead of the deprecated useLegacyTable bridge. - Add src/lib/table-features.ts and src/lib/data-grid-features.ts declaring the explicit feature sets for the data-table and data-grid systems, replacing the always-bundled v8 behavior and the old declare-module meta augmentation with metaHelper()-typed tableMeta/columnMeta. - Replace useReactTable with useTable in both hooks; move all row-model options (getCoreRowModel, getFilteredRowModel, etc.) into feature row-model slots. - Migrate column pinning from physical left/right to logical start/end throughout (state, .pin(), getIsPinned(), getStart/getAfter, getLeftVisibleLeafColumns -> getStartVisibleLeafColumns, etc.). - Rename columnSizingInfo -> columnResizing and table._getDefaultColumnDef() -> table.getDefaultColumnDef(). - Replace removed table.getState() with table.state (hook-owned tables) or table.store.state (components receiving table as a prop). - Rename VisibilityState -> ColumnVisibilityState. - Adjust row-selection updates for the tightened RowSelectionState (Record<string, true>) by deleting keys instead of storing false. - Thread TFeatures through every Table/Column/Row/Cell/Header/ColumnDef/ TableOptions/TableState generic and add RowData constraints across all affected components. Passes tsc, biome, and the full vitest suite; manually tested sorting, column pinning, and row selection against the dev server.
public/r/*.json was last regenerated before the v9 migration, so `npx shadcn add` was still serving pre-migration v8-shaped component code (e.g. Table<TData> instead of Table<DataTableFeatures, TData>) even though the registry's own dependencies field installs whatever @tanstack/react-table version is latest on npm (now v9). That mismatch caused the same import/type breakage reported upstream in sadmann7#1010 and sadmann7/diceui#204. Regenerate public/r/*.json via `shadcn build` and run build:registry as part of the build script so the registry can't drift out of sync with source again.
registry.json's items declared files/registryDependencies that were incomplete relative to what the v9-migrated source actually imports, so `npx shadcn add` installed components that failed to resolve at runtime (e.g. data-table.tsx importing "@/lib/table-features", a file the CLI never wrote to disk). Added the missing entries across every affected item: - data-table, data-table-sort-list, data-table-filter-list, data-table-filter-menu: src/lib/table-features.ts - data-table: registryDependencies "label", "skeleton" - data-table-sort-list: src/lib/parsers.ts - data-table-filter-list, data-table-filter-menu: src/components/data-table/data-table-view-options.tsx - data-grid, data-grid-select-column, data-grid-sort-menu, data-grid-row-height-menu, data-grid-view-menu, data-grid-filter-menu, use-data-grid-undo-redo: src/lib/data-grid-features.ts - data-grid-select-column, data-grid-sort-menu, data-grid-row-height-menu, data-grid-view-menu, use-data-grid-undo-redo: src/types/data-grid.ts - data-grid-filter-menu: src/hooks/use-callback-ref.ts - use-data-grid-undo-redo: src/lib/data-grid.ts, src/hooks/use-isomorphic-layout-effect.ts Checked every item's declared files against their internal @/ imports to confirm each import is either declared in the same item or a registryDependency; all 13 items are now self-contained. Regenerated public/r/*.json via pnpm build:registry.
…lisions Installing via `npx shadcn add <url>` produced files with corrupted imports (e.g. lib/data-table.ts importing getColumnPinningStyle *from* the data-table.tsx component, causing "Circular definition of import alias" / "declares X locally, but it is not exported" errors) even after the registry-staleness fix. Root-caused by reproducing the CLI's `add` command against a local static server serving this repo's built registry JSON. Two separate bugs in how the CLI rewrites `@/`-aliased imports for remote registries: 1. The CLI's alias rewriter only understands 5 categories (ui, components, hooks, lib, utils/lib-utils). This registry used `@/config/*` and `@/types/*`, which aren't in that set, so imports of dataTableConfig/ExtendedColumnFilter/etc. got silently rewritten to a nonsensical `@/components/...` path. Fix: move src/config/data-table.ts, src/types/data-table.ts, and src/types/data-grid.ts under src/lib/ (data-table-config.ts, data-table-types.ts, data-grid-types.ts), which the CLI handles correctly. 2. Separately, the CLI's "fix imports" pass matches candidate files by basename across the whole install batch. src/lib/data-table.ts and src/components/data-table/data-table.tsx shared the basename "data-table" (same for data-grid.ts vs data-grid.tsx), so an already-correct `@/lib/data-table` import got rewritten to the sibling component file instead. Fix: rename src/lib/data-table.ts -> data-table-helpers.ts and src/lib/data-grid.ts -> data-grid-helpers.ts so every registry item's file basenames are unique. Confirmed via a real `shadcn add` run against the built registry that every cross-file import in the data-table and data-grid item families now resolves correctly, plus a registry.json audit for missing dependencies or basename clashes. typecheck, lint, tests, and the production build all pass.
|
@lamberto15 is attempting to deploy a commit to the sadmann7 Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
The migration spans core hook logic, many UI components, and registry build outputs, so it warrants final human validation despite appearing consistent in the diff.
Pull request overview
This pull request migrates the project’s DataTable/DataGrid stack from TanStack Table v8 to v9 (adopting the new tableFeatures() + useTable() API and start/end pinning), and rebuilds/updates the shadcn registry outputs so npx shadcn add installs components that match the updated source and dependencies.
Changes:
- Upgrade
@tanstack/react-tableto v9.1.2 and refactor hooks/components to the v9 API (useTable,table.state/table.store.state, start/end pinning, updated type generics). - Introduce shared v9 feature bundles (
dataTableFeatures,dataGridFeatures) and move table/grid configs & types intosrc/lib/*to avoid registry/alias rewrite issues. - Rebuild registry manifests and embedded file snapshots under
public/r/*, and make registry building part of the standard build pipeline.
File summaries
| File | Description |
|---|---|
| src/lib/test/data-grid.test.ts | Updates TSV parser import to new helper module. |
| src/lib/table-features.ts | Adds TanStack v9 tableFeatures() bundle for DataTable. |
| src/lib/parsers.ts | Moves DataTable config/types imports under src/lib/*. |
| src/lib/filter-columns.ts | Updates DataTable type imports to new lib types. |
| src/lib/export.ts | Updates export helper to v9 Table<Features, TData> typing. |
| src/lib/data-table-types.ts | Refactors DataTable meta/types to be used via v9 feature meta helpers. |
| src/lib/data-table-helpers.ts | Updates pinning helpers to v9 start/end model and v9 generics. |
| src/lib/data-table-config.ts | New shared DataTable operator/config definition under src/lib. |
| src/lib/data-grid-types.ts | Refactors DataGrid meta/types to be used via v9 feature meta helpers. |
| src/lib/data-grid-helpers.ts | Updates DataGrid helper typings and start/end pinning utilities. |
| src/lib/data-grid-filters.ts | Updates filter function typings for v9 FilterFn<Features, TData>. |
| src/lib/data-grid-features.ts | Adds TanStack v9 tableFeatures() bundle for DataGrid. |
| src/hooks/use-data-table.ts | Migrates DataTable hook from useReactTable to useTable + features. |
| src/hooks/use-data-grid.ts | Migrates DataGrid hook to v9 API and start/end pinning + updated state access. |
| src/hooks/use-data-grid-undo-redo.ts | Updates helper imports to the new data-grid helper module. |
| src/hooks/test/use-data-grid.test.tsx | Updates tests for v9 table.state access and v9 generics. |
| src/db/schema.ts | Updates FileCellData type import path to new lib types module. |
| src/components/data-table/data-table.tsx | Updates DataTable component typing to Table<DataTableFeatures, TData>. |
| src/components/data-table/data-table-view-options.tsx | Updates v9 generics and shared features typing. |
| src/components/data-table/data-table-toolbar.tsx | Updates v9 generics and state access for filtering state. |
| src/components/data-table/data-table-sort-list.tsx | Updates v9 generics and sorting state access. |
| src/components/data-table/data-table-slider-filter.tsx | Updates v9 column typing with features + RowData constraint. |
| src/components/data-table/data-table-range-filter.tsx | Updates v9 column typing and shared type imports. |
| src/components/data-table/data-table-pagination.tsx | Updates v9 table typing and pagination state access. |
| src/components/data-table/data-table-filter-menu.tsx | Updates v9 table/column typing and shared helper/type imports. |
| src/components/data-table/data-table-filter-list.tsx | Updates v9 typing and replaces ColumnMeta use with project meta type. |
| src/components/data-table/data-table-faceted-filter.tsx | Updates v9 typing and option type import path. |
| src/components/data-table/data-table-date-filter.tsx | Updates v9 column typing (RowData constraint + features). |
| src/components/data-table/data-table-column-header.tsx | Updates v9 column typing (RowData constraint + features). |
| src/components/data-table/data-table-advanced-toolbar.tsx | Updates v9 table typing (RowData constraint + features). |
| src/components/data-grid/data-grid.tsx | Updates state access to v9 (table.state.*) and helper import path. |
| src/components/data-grid/data-grid-view-menu.tsx | Updates v9 table typing and shared features typing. |
| src/components/data-grid/data-grid-sort-menu.tsx | Updates v9 table typing and sorting state access. |
| src/components/data-grid/data-grid-select-column.tsx | Updates ColumnDef/context generics to include features + RowData constraint. |
| src/components/data-grid/data-grid-search.tsx | Updates DataGrid type import path to new lib types module. |
| src/components/data-grid/data-grid-row.tsx | Updates row/meta typing to v9 features-based generics. |
| src/components/data-grid/data-grid-row-height-menu.tsx | Updates v9 table typing and shared features typing. |
| src/components/data-grid/data-grid-paste-dialog.tsx | Replaces TableMeta<TData> usage with project DataGridTableMeta. |
| src/components/data-grid/data-grid-filter-menu.tsx | Updates v9 table/column typing and filter value type imports. |
| src/components/data-grid/data-grid-context-menu.tsx | Updates typing to v9 features-based generics and helper/type import paths. |
| src/components/data-grid/data-grid-column-header.tsx | Updates pinning API (start/end) and v9 state access for resizing. |
| src/components/data-grid/data-grid-cell.tsx | Updates cell typing to v9 features-based generics + RowData constraint. |
| src/components/data-grid/data-grid-cell-wrapper.tsx | Updates helper/type imports and v9 generics constraints. |
| src/components/data-grid/data-grid-cell-variants.tsx | Updates helper/type imports and v9 generics constraints. |
| src/app/page.tsx | Updates helper import path to new DataTable helpers module. |
| src/app/data-grid/lib/seeds.ts | Updates FileCellData type import path to new lib types module. |
| src/app/data-grid/components/data-grid-demo.tsx | Updates pinning state shape (start/end) and v9 ColumnDef typing. |
| src/app/data-grid-render/components/data-grid-render-demo.tsx | Updates CellUpdate type import path and v9 ColumnDef typing. |
| src/app/data-grid-multiplayer/components/data-grid-multiplayer-demo.tsx | Updates helper import path and pinning state shape (start/end) + v9 ColumnDef typing. |
| src/app/data-grid-live/components/data-grid-live-demo.tsx | Updates pinning state shape (start/end) and v9 ColumnDef typing. |
| src/app/data-grid-live/components/data-grid-action-bar.tsx | Updates table/meta typing to v9 features-based generics. |
| src/app/components/tasks-table.tsx | Updates DataTable pinning state shape (start/end) and type import paths. |
| src/app/components/tasks-table-toolbar-actions.tsx | Updates table typing to v9 features-based generics for CSV export. |
| src/app/components/tasks-table-columns.tsx | Updates ColumnDef typing to include DataTable features. |
| src/app/components/tasks-table-action-bar.tsx | Updates table typing to v9 features-based generics for actions/export. |
| src/app/components/delete-tasks-dialog.tsx | Updates Row typing to v9 features-based generics. |
| registry.json | Updates registry file lists/dependencies to match v9-migrated source layout. |
| public/r/use-data-grid-undo-redo.json | Updates embedded registry snapshot for undo/redo hook + new deps. |
| public/r/registry.json | Updates built registry output to match updated registry.json. |
| public/r/data-table-sort-list.json | Updates embedded registry snapshot to v9 types/config import paths. |
| public/r/data-grid-view-menu.json | Updates embedded registry snapshot to v9 generics/features typing. |
| public/r/data-grid-sort-menu.json | Updates embedded registry snapshot to v9 generics/features typing. |
| public/r/data-grid-select-column.json | Updates embedded registry snapshot to v9 generics/features typing. |
| public/r/data-grid-row-height-menu.json | Updates embedded registry snapshot to v9 generics/features typing. |
| pnpm-lock.yaml | Locks TanStack Table v9 + new TanStack store packages required by v9. |
| package.json | Bumps @tanstack/react-table to v9 and runs registry build during pnpm build. |
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 67/71 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Owner
|
@lamberto15 thanks a lot. can you revert the lib file renames like there is already a segment in the docs about the shadcn cli installation issue for custom paths. rn putting everything in lib seems weird to me. |
Keep src/types/ and src/config/ where they were instead of folding them into src/lib/. The shadcn CLI's import-rewriter doesn't recognize those as aliases when installing from a remote registry, but that's already called out in the docs, and reshaping the project layout just to dodge it isn't worth it. The data-table.ts/data-grid.ts -> *-helpers.ts renames in src/lib/ stay, since those were fixing an actual basename collision with the component files. Regenerated public/r/*.json to match.
lamberto15
marked this pull request as draft
September 2, 2026 05:58
Author
Done, pushed the revert. src/types and src/config are back where they were. I kept the data-table.ts/data-grid.ts renames to *-helpers.ts in src/lib though, since that one's fixing a real basename collision with the component files, not the alias issue. |
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This migrates the table components from TanStack Table v8 to v9 and fixes the registry so
npx shadcn addactually installs working, up-to-date components.Table library migration
@tanstack/react-tableto^9.1.2and switches to the v9 API:tableFeatures()+useTable()+metaHelper()instead ofuseLegacyTable.columnSizingInfo->columnResizing,VisibilityState->ColumnVisibilityState,table.getState()->table.state/table.store.state, etc.RowSelectionStateis nowRecord<string, true>, so selection updates delete keys instead of settingfalse.Registry fixes
public/r/*.jsonhad drifted out of sync with source (still v8-shaped), while the registry's own npm dependency pointed at the latest@tanstack/react-table(v9) - this is what's behind [bug]: Unpredictible installation via Dice UI and possible architectural concerns #1010 and [bug]: Can't install data-table. diceui#204. Registry is now rebuilt andbuild:registryruns as part of the build so it can't drift again.@/config/*or@/types/*aliases and matches files by basename across the install batch, which was corrupting imports on install. Moved the affected files undersrc/lib/with unique basenames (e.g.data-table.ts->data-table-helpers.ts) to work around both issues.Ran typecheck, lint, and the full test suite; also did a real
shadcn addinstall against the built registry to confirm every component resolves correctly.