Getting Started
Migrating to v1 (TanStack Table v9)
What changes when updating shadcn-table from v0.x (TanStack Table v8) to v1 (TanStack Table v9)
shadcn-table v1 is built on TanStack Table v9. The table keeps its own option names (enableRowPinning, st*Props, renderDetailPanel, ...); where TanStack renamed something, the table and its ST_* types follow TanStack, with no aliases for the old names. Update with the install command and --overwrite, then apply the changes below to your own code. TanStack's own list is in the TanStack Table v9 migration guide.
Dependency
@tanstack/react-table9.3.1 is required (it brings@tanstack/table-core9.3.1,@tanstack/react-storeand@tanstack/store0.11.2). The install command updates it; a project that pins v8 elsewhere has to move to v9, TanStack Table v8 is no longer supported.
Renamed names
| v0.x (TanStack Table v8) | v1 (TanStack Table v9) |
|---|---|
table.getState() | table.state (ST_TableState<TData>: the TanStack slices plus density, isFullScreen, creatingRow, ... in one object) |
column option sortingFn | sortFn |
table option sortingFns | sortFns |
type ST_SortingFn, registry ST_SortingFns | ST_SortFn, ST_SortFns |
@/components/ui/shadcn-table/fns/sortingFns | @/components/ui/shadcn-table/fns/sortFns |
state columnSizingInfo, type ST_ColumnSizingInfoState | columnResizing, ST_ColumnResizingState |
table.setColumnSizingInfo, option onColumnSizingInfoChange | table.setColumnResizing, onColumnResizingChange |
columnPinning: { left, right } | columnPinning: { start, end } (logical sides; start is left in LTR) |
column.pin('left' | 'right' | false) | column.pin('start' | 'end' | false), column.getIsPinned() returns 'start' | 'end' | false (new type ST_ColumnPinningPosition) |
table.getLeftLeafColumns(), table.getRightLeafColumns() | table.getStartLeafColumns(), table.getEndLeafColumns() |
every other Left/Right method (getLeftVisibleLeafColumns, getLeftTotalSize, row.getLeftVisibleCells, ...) | the Start/End name; column.getStart(), getAfter(), getIsFirstColumn(), getIsLastColumn(), getIndex() take 'start' | 'end' | 'center' |
table.getPaginationRowModel(), table.getPrePaginationRowModel() | table.getPaginatedRowModel(), table.getPrePaginatedRowModel() |
Row selection
- The
enableBatchRowSelectiontable option is removed. Shift-click range selection is TanStack'senableRowRangeSelection(defaulttrue);isRowRangeSelectionEventcustomises which events count as a range selection. table.refs.lastSelectedRowIdis removed (TanStack keeps the range anchor internally).getST_RowSelectionHandler({ row, table })no longer readsstaticRowIndex(it is still accepted in the props type).table.getIsSomeRowsSelected(),table.getIsSomePageRowsSelected()androw.getIsSomeSelected()now mean "at least one" (the all-selected case included), per TanStack. The library gates its own indeterminate checkboxes with the matchinggetIsAll*check; do the same when one of these drives an indeterminate state in your code:table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected().
Aggregation and the function registries
- Custom aggregation functions are v9 definitions:
constructAggregationFn({ aggregate: (context) => ..., merge? })objects instead of(columnId, leafRows, childRows)callables.ST_AggregationFn<TData>is a definition or a name;ST_AggregationFns.*are definitions (call.aggregate(context)). A stringaggregationFn, including names from theaggregationFnstable option, is resolved by the library; anaggregationFnarray still yields an array of results. - The
filterFns,sortFnsandaggregationFnstable options are typed by the library:Record<string, FilterFn<ST_Features, TData>>,Record<string, SortFn<ST_Features, TData>>andRecord<string, AggregationFnDef<ST_Features, TData, any, any>>. The built-in registries live on the static features object; custom names are resolved by name. ST_FilterFns.*andST_SortFns.fuzzyhave v9 signatures (filter functions generic over the features with an optionaladdMeta; the fuzzy sort is built withconstructSortFn).
Table instance and types
- New exports
stFeaturesandST_Features(utils/tanstack.features.ts, also from the index): thetableFeatures({...})object with all 15 features, 8 row models and 3 registries. UsecreateColumnHelper<ST_Features, TData>()or TanStack types asColumn<ST_Features, TData, TValue>; the publicST_*types keep their<TData>and<TData, TValue>signatures. ST_TableInstance<TData>is built onReactTable<ST_Features, TData, ST_TableState<TData>>:table.store,table.atoms,table.baseAtoms,table.Subscribeandtable.FlexRenderare available.ST_TableOptionsno longer acceptsfeatures,onStateChangeor theget*RowModeloptions; the row models andfeaturesare set by the library.ST_VisibilityStatenow aliases TanStack'sColumnVisibilityState(same shape);ST_ColumnResizingStatealiases TanStack'scolumnResizingState.initialState.columnPinningmay still be partial ({ start }or{ end }alone); the library fills the missing side with[]because v9 does not. Thestate.columnPinningandrowPinningobjects need both sides ({ start: [], end: [...] },{ top: [...], bottom: [] }), androwSelectiononly holdstrueentries (Record<string, true>).