Migrating from TanStack Table v8 to v9

1.Register features and row models

v8 bundled every feature and took row models as get*RowModel() options. v9 asks you to say what the table uses: you build a features object once, pass it as `features`, and row models become named slots inside it. getCoreRowModel() is gone; the core row model is automatic.

import {
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  useReactTable,
} from '@tanstack/react-table'

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

import {
  columnFilteringFeature,
  createFilteredRowModel,
  createSortedRowModel,
  rowSortingFeature,
  tableFeatures,
  useTable,
} from '@tanstack/react-table'

const features = tableFeatures({
  columnFilteringFeature,
  rowSortingFeature,
  filteredRowModel: createFilteredRowModel(),
  sortedRowModel: createSortedRowModel(),
})

const table = useTable({ features, data, columns })

If a table method is missing in v9, the feature that owns it is usually not registered, not removed. Declare a feature before the row model that depends on it.

2.Add the features type to your column and table types

Every table type now starts with the type of your features object, so TypeScript knows which methods exist. Use `typeof features` rather than writing it out. Row data must also be an object or array, which is why generic components in these examples became `TData extends RowData`.

export const columns: ColumnDef<User>[] = [...]

function PinControls<TData>({
  column,
}: {
  column: Column<TData, unknown>
}) {}

export const columns: ColumnDef<typeof features, User>[] = [...]

function PinControls<TData extends RowData>({
  column,
}: {
  column: Column<typeof features, TData, unknown>
}) {}

3.Rename sorting functions

Everything called sortingFn is now sortFn, including the column option, the registry in tableFeatures(), and the type names.

{ accessorKey: 'name', sortingFn: 'alphanumeric' }

{ accessorKey: 'name', sortFn: 'alphanumeric' }

filterFns, sortFns and aggregationFns are registered in tableFeatures() instead of being table options or global type augmentations.

4.Read state from the store

table.getState() is replaced by table.state or table.store.state. A single onStateChange callback no longer exists; use the per-slice callbacks (onSortingChange, onPaginationChange, …) you already use for controlled state, or table.store.subscribe() to hear about every change.

const { pageIndex, pageSize } = table.getState().pagination

const { pageIndex, pageSize } = table.store.state.pagination

By default useTable still re-renders on every state change. To narrow that, pass a selector as the second argument or render <table.Subscribe selector={…}> around only the part that needs the state.

5.Pin columns to start and end

Column pinning uses logical regions instead of physical sides. The state keys, the arguments to column.pin(), the values returned by getIsPinned(), and every left/right method family change together, so search for all of them.

const [pinning, setPinning] = useState({ left: [], right: [] })

column.pin('left')
column.getStart('left')
row.getLeftVisibleCells()

const [pinning, setPinning] = useState({ start: [], end: [] })

column.pin('start')
column.getStart('start')
row.getStartVisibleCells()

This is logical positioning, not automatic RTL styling. Your sticky CSS still decides which physical edge a pinned column sticks to.

6.Check selection and sizing behavior changes

getIsSomeRowsSelected() and getIsSomePageRowsSelected() now mean at least one row, including when all rows are selected. Check the "all" case first, or exclude it, to compute an indeterminate checkbox. Column sizing is split in two: columnSizingFeature for widths and columnResizingFeature for dragging, and the columnSizingInfo state is now columnResizing.

const indeterminate = table.getIsSomeRowsSelected()

const indeterminate =
  table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()