DataTable TanStack Table v9 migration guide

@ngrok/mantle/data-table now re-exports TanStack Table v9. The DataTable parts keep their names and props. What changes is how you build the table instance and its columns: v9 makes every feature opt-in, so each table registers the features it uses, and TypeScript knows which methods exist on that table.

TL;DR: for each table that calls useReactTable:

1. Build a features object with tableFeatures({ … }) at module scope and call useTable({ features, data, columns }).
2. Delete getCoreRowModel. Turn every other get*RowModel() option into a feature plus a row-model slot inside tableFeatures. Register the filterFns and aggregationFns your columns resolve by name.
3. Type the helper as createColumnHelper<typeof features, T>() and wrap the array in columnHelper.columns([…]).
4. Rename sortingFn to sortFn and register the comparators you use in the sortFns slot.
5. Read table.state instead of table.getState().
6. Type table.options.meta through the tableMeta slot instead of an as cast.

The rest of this page covers each step with before/after code, the mantle parts that now need a feature, and a checklist.

Codemod

From a mantle checkout:

pnpm -w run migrate 0006 <path>

In a project that installs @ngrok/mantle:

npx --yes --package=@ast-grep/cli@0.51.0 ast-grep scan --rule node_modules/@ngrok/mantle/dist/migrations/0006-data-table-tanstack-v9.yml --update-all <path>

The rules run on .ts and .tsx files that import from @ngrok/mantle/data-table, and leave every other file alone. They apply the rename in step 4, sortingFn to sortFn, in a column definition only: the options of a columnHelper call, an element of a columns array, or an object with a column key such as header or cell. Row data with a sortingFn field stays. They apply the read in step 5, table.getState() to table.state, on three shapes: the result of a useTable call under any name, a callback's table argument, and a prop whose name ends in table. The rules read the useTable result in the scope that declares it, so a sibling function's variable under the same name stays, and so does a parameter that shadows it in a nested function. The table suffix is a spelling heuristic, so read the dry run for a store that shares the suffix. A store the file declares under that name stays. Steps 1 to 3 and 6 stay manual, because which features and row models a table registers depends on what its columns do. Pass --dry-run to print the rewrites first, and run your formatter after the rewrite.

Why this change

TanStack Table v8 shipped every feature on every table. Sorting, filtering, pinning, and selection code landed in your bundle whether the table used them or not, and table.options.meta was untyped unless you merged a global declaration.

v9 flips that. A table registers the features it uses in a features object, and that object's type flows into the table, its rows, columns, and cells:

• Only the registered features ship in the bundle.
• row.getIsSelected() exists on the row type only when the table registers rowSelectionFeature. A call on a table that can't select is a compile error, not a runtime undefined is not a function.
• table.options.meta and columnDef.meta take their types from the features object, with no global declaration merging and no as casts.

Mantle's DataTable parts are generic over that features object. DataTable.HeaderSortButton rejects a column from a table without rowSortingFeature, and DataTable.RowExpandButton rejects a row from a table without rowExpandingFeature, both at compile time. No other mantle prop name changed.

Before you start

• @tanstack/react-table must not be a direct dependency of your app. @ngrok/mantle/data-table re-exports every v9 export: useTable, tableFeatures, createColumnHelper, every *Feature object, every create*RowModel factory, the sortFn_*, filterFn_*, and aggregationFn_* functions, metaHelper, flexRender, and every type. If package.json lists @tanstack/react-table, remove it and point every import at @ngrok/mantle/data-table.
• Do not reach for the compatibility layer. Mantle does not re-export @tanstack/react-table/legacy, useLegacyTable, legacyCreateColumnHelper, or the deprecated get*RowModel stubs. See What not to do.
• Read the DataTable docs for the current recipes. Every example there is already on v9.

What to search for

Every file that imports from @ngrok/mantle/data-table is a candidate. Run this from your app root to find the renamed calls and options:

grep -rnE "useReactTable|getCoreRowModel|get(Sorted|Filtered|Pagination|Expanded|Grouped|Faceted)RowModel|sortingFn|getSortingFn|filterFn|columnFilters|aggregationFn|getIsAggregated|getState\(\)|onStateChange|options\.meta|columnSizingInfo|enablePinning" --include='*.ts' --include='*.tsx' app

The grep covers the renames. The table below adds the type, state, and method names to check by hand in each candidate file, and maps each to a step:

Step 1: build a features object

useReactTable is now useTable, and it requires a features option. Build the object with tableFeatures, which infers the type that every other v9 generic reads.

Before:

1import {2	DataTable,3	createColumnHelper,4	getCoreRowModel,5	getSortedRowModel,6	useReactTable,7} from "@ngrok/mantle/data-table";8 9type Payment = { id: string; amount: number; email: string; status: string };10 11const columnHelper = createColumnHelper<Payment>();12 13const columns = [⋯14	// …15];16 17function PaymentsTable({ data }: { data: Payment[] }) {⋯18	const table = useReactTable({⋯19		data,20		columns,21		getCoreRowModel: getCoreRowModel(),22		getSortedRowModel: getSortedRowModel(),23	});24	// …25}

After:

1import {2	DataTable,3	createColumnHelper,4	createSortedRowModel,5	rowSortingFeature,6	sortFn_alphanumeric,7	sortFn_datetime,8	sortFn_text,9	tableFeatures,10	useTable,11} from "@ngrok/mantle/data-table";12 13type Payment = { id: string; amount: number; email: string; status: string };14 15// Register only the features this table uses. Auto-sort resolves the16// `alphanumeric`, `text`, and `datetime` comparators by name, so register those three.17const features = tableFeatures({⋯18	rowSortingFeature,19	sortedRowModel: createSortedRowModel(),20	sortFns: {⋯21		alphanumeric: sortFn_alphanumeric,22		datetime: sortFn_datetime,23		text: sortFn_text,24	},25});26 27const columnHelper = createColumnHelper<typeof features, Payment>();28 29const columns = columnHelper.columns([⋯30	// …31]);32 33function PaymentsTable({ data }: { data: Payment[] }) {⋯34	const table = useTable({ features, data, columns });35	// …36}

A table with no sorting, filtering, expansion, or selection registers nothing:

1const features = tableFeatures({});

Where to define features

Define the features object at module scope, next to the column helper. useTable registers the features when it builds the table on the first render, and every later options merge keeps that first features object. A features object built inside the component is re-created each render but never applied again, so a conditional feature set has no effect after mount.

Most apps have a handful of table shapes. Put those in one module and import the preset each table needs:

1// app/utilities/table-features.ts2import {3	columnFilteringFeature,4	createFilteredRowModel,5	createPaginatedRowModel,6	createSortedRowModel,7	globalFilteringFeature,8	rowPaginationFeature,9	rowSortingFeature,10	sortFn_alphanumeric,11	sortFn_datetime,12	sortFn_text,13	tableFeatures,14} from "@ngrok/mantle/data-table";15 16/** A read-only table that sorts on the client. */17export const sortableTableFeatures = tableFeatures({⋯18	rowSortingFeature,19	sortedRowModel: createSortedRowModel(),20	sortFns: {⋯21		alphanumeric: sortFn_alphanumeric,22		datetime: sortFn_datetime,23		text: sortFn_text,24	},25});26 27/** A list page: sorting, a search box, and page controls. */28export const listTableFeatures = tableFeatures({⋯29	columnFilteringFeature,30	globalFilteringFeature,31	rowPaginationFeature,32	rowSortingFeature,33	filteredRowModel: createFilteredRowModel(),34	paginatedRowModel: createPaginatedRowModel(),35	sortedRowModel: createSortedRowModel(),36	sortFns: {⋯37		alphanumeric: sortFn_alphanumeric,38		datetime: sortFn_datetime,39		text: sortFn_text,40	},41});

A table that needs its own tableMeta type (see Step 7) spreads a preset into its own tableFeatures call:

1const features = tableFeatures({⋯2	...sortableTableFeatures,3	tableMeta: metaHelper<PaymentsTableMeta>(),4});

Two other shapes exist. Neither is the default:

• createTableHook({ features }) returns a useAppTable hook, a createAppColumnHelper factory, and useTableContext, useCellContext, and useHeaderContext hooks, all bound to one features object. The table useAppTable returns carries context-bound AppTable, AppCell, AppHeader, and AppFooter components. Reach for it when an app wants one table hook with shared cell and header components. The useAppTable return value is a valid table prop for DataTable.Root.
• stockFeatures registers every built-in feature at once: tableFeatures({ ...stockFeatures, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric, datetime: sortFn_datetime, text: sortFn_text } }). It skips tree-shaking, so every feature lands in the bundle, and it still needs the row-model slots. Treat it as a last resort for a table you can't audit, not as the recommendation.

A row model that a prop turns on or off

useTable registers features once, so a features object cannot follow a prop. Register the feature and toggle its behavior through a table option instead. manualPagination hands the pre-paginated rows straight through, and the table re-reads it on every render:

Before:

1const table = useReactTable({⋯2	...(preventPagination ? {} : { getPaginationRowModel: getPaginationRowModel() }),3	getCoreRowModel: getCoreRowModel(),4	data,5	columns,6});

After:

1const features = tableFeatures({⋯2	rowPaginationFeature,3	paginatedRowModel: createPaginatedRowModel(),4});5 6const table = useTable({⋯7	features,8	data,9	columns,10	// Every row renders while the prop is set; the page size no longer applies.11	manualPagination: preventPagination,12});

manualSorting, manualFiltering, manualGrouping, and manualExpanding work the same way for their row models.

Step 2: replace the row models

v8 turned a row model on by passing a get*RowModel() option. v9 pairs a feature (the state and methods) with a row-model slot (the client-side processing). Both go in tableFeatures. If a slot is present without its feature, tableFeatures fails to typecheck with a message that names the missing feature.

Three rules that tableFeatures enforces at the type level:

• sortedRowModel requires rowSortingFeature, filteredRowModel requires columnFilteringFeature, paginatedRowModel requires rowPaginationFeature, expandedRowModel requires rowExpandingFeature, and groupedRowModel requires columnGroupingFeature.
• globalFilteringFeature requires columnFilteringFeature. The default global filter is filterFn_includesString itself, and it needs no filterFns registration. A column filter with "auto" or a string name does: see Register filterFns.
• sortFns, filterFns, and aggregationFns require rowSortingFeature, columnFilteringFeature, and rowAggregationFeature.

Register filterFns

A column's filterFn defaults to "auto", which picks a built-in filter by the column's first non-null value. In v9, "auto" and every string name resolve against the filterFns slot on your features object. With no slot, the column has no filter function: table.getFilteredRowModel() returns every row, and only a development build logs a warning. A function value for filterFn bypasses the slot, and manualFiltering: true runs no filter function on the client. The global filter's "auto" default is filterFn_includesString itself, so a table with only a search box needs no slot either.

Register the filters your columns resolve by name. The registry keys become the only valid string values for filterFn:

Before:

1const table = useReactTable({⋯2	getCoreRowModel: getCoreRowModel(),3	getFilteredRowModel: getFilteredRowModel(),4	data,5	columns,6	state: { columnFilters },7	onColumnFiltersChange: setColumnFilters,8});

After:

1// The filtered columns hold strings, so `"auto"` resolves `includesString`.2const features = tableFeatures({⋯3	columnFilteringFeature,4	filteredRowModel: createFilteredRowModel(),5	filterFns: {⋯6		includesString: filterFn_includesString,7	},8});9 10const table = useTable({⋯11	features,12	data,13	columns,14	state: { columnFilters },15	onColumnFiltersChange: setColumnFilters,16});

columnFilters state, onColumnFiltersChange, column.setFilterValue(), column.getFilterValue(), and column.getIsFiltered() are unchanged. A custom named filter goes in the same object, and its key becomes a valid filterFn string.

Register aggregationFns for grouped totals

v8 aggregated every non-grouping column on a group row by default: getValue() on a number column returned the sum of the leaf rows, and on a Date column the extent, with no aggregationFn on the column. In v9 that behavior lives in rowAggregationFeature, and its "auto" default resolves sum and extent against the aggregationFns slot. With columnGroupingFeature alone, a group row's getValue() returns undefined for every non-grouping column, so a cell that renders props.getValue() goes blank on the group rows. rowAggregationFeature without the slot does the same, and only a development build logs a warning.

If a group row shows a value for a non-grouping column, register rowAggregationFeature and the aggregations its columns resolve by name. cell.getIsAggregated(), aggregatedCell, column.getAggregationValue(), and a column's own aggregationFn: "name" also need the feature. A column whose aggregationFn is a constructAggregationFn({ … }) value, not a name, bypasses the slot but still needs the feature. The registry keys become the only valid string values for aggregationFn.

ngrok's dashboard has a grouped usage table that also hides a column. Its usage columns hold numbers, so v8 summed them on each group row:

Before:

1const table = useReactTable({⋯2	getCoreRowModel: getCoreRowModel(),3	getGroupedRowModel: getGroupedRowModel(),4	getExpandedRowModel: getExpandedRowModel(),5	data,6	columns,7	initialState: { grouping: ["group"], expanded: true },8	state: { columnVisibility: { group: false } },9});

After:

1// `"auto"` resolves `sum` for the number columns, so register it to keep the totals.2const features = tableFeatures({⋯3	columnGroupingFeature,4	columnVisibilityFeature,5	rowAggregationFeature,6	rowExpandingFeature,7	expandedRowModel: createExpandedRowModel(),8	groupedRowModel: createGroupedRowModel(),9	aggregationFns: {⋯10		sum: aggregationFn_sum,11	},12});13 14const table = useTable({⋯15	features,16	data,17	columns,18	initialState: { grouping: ["group"], expanded: true },19	state: { columnVisibility: { group: false } },20});

row.getIsGrouped(), row.groupingValue, initialState.grouping, and initialState.expanded are unchanged.

Step 3: type the column helper and wrap the columns

createColumnHelper takes the features type first, and the column array must go through columnHelper.columns.

Before:

1const columnHelper = createColumnHelper<Payment>();2 3const columns = [⋯4	columnHelper.accessor("email", {⋯5		id: "email",6		header: () => <DataTable.Header>Email</DataTable.Header>,7		cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,8	}),9	columnHelper.accessor("amount", {⋯10		id: "amount",11		header: () => <DataTable.Header>Amount</DataTable.Header>,12		cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,13	}),14];

After:

1const columnHelper = createColumnHelper<typeof features, Payment>();2 3const columns = columnHelper.columns([⋯4	columnHelper.accessor("email", {⋯5		id: "email",6		header: () => <DataTable.Header>Email</DataTable.Header>,7		cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,8	}),9	columnHelper.accessor("amount", {⋯10		id: "amount",11		header: () => <DataTable.Header>Amount</DataTable.Header>,12		cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,13	}),14]);

The wrapper isn't cosmetic. Each accessor's TValue (string for email, number for amount) sits in a contravariant position, because the cell render prop receives it. A bare array of those definitions does not widen to the ColumnDef<typeof features, Payment>[] that useTable's columns option expects, and the call fails to typecheck. columnHelper.columns infers each element's type as a tuple member first and returns an array that is assignable. At runtime it returns the same array.

If a function builds the columns (a useMemo factory, or a function that takes a search string), return columnHelper.columns([…]) from it. columnHelper.display and columnHelper.group definitions go inside the same array.

Step 4: rename the sort options and register sortFns

Three renames, one new requirement.

Unchanged: enableSorting, sortUndefined, sortDescFirst, manualSorting, onSortingChange, SortingState, column.getIsSorted(), column.getCanSort(), column.toggleSorting(), column.clearSorting().

Before:

1columnHelper.accessor("createdAt", {2	id: "createdAt",3	sortingFn: "datetime",4	// …5}),6columnHelper.accessor("amount", {7	id: "amount",8	sortingFn: (rowA, rowB) => rowA.original.amount - rowB.original.amount,9	// …10}),

After:

1columnHelper.accessor("createdAt", {2	id: "createdAt",3	sortFn: "datetime",4	// …5}),6columnHelper.accessor("amount", {7	id: "amount",8	sortFn: (rowA, rowB) => rowA.original.amount - rowB.original.amount,9	// …10}),

Register sortFns

A column's sortFn defaults to "auto", which picks a built-in comparator by the column's values. In v9, "auto" and every string name resolve against the sortFns slot on your features object. With no slot, auto-sort logs a dev warning and falls back to sortFn_basic, which loses the natural ordering that alphanumeric gives (item2 before item10). DataTable.HeaderSortButton's sortingMode prop picks the icon and the toggle order; it does not pick the comparator. So every sortable table registers its comparators in the sortFns slot.

Register the three comparators auto-sort resolves by name. Numbers need no entry: auto-sort uses sortFn_basic for them directly. The registry keys become the only valid string values for sortFn:

1const features = tableFeatures({⋯2	rowSortingFeature,3	sortedRowModel: createSortedRowModel(),4	sortFns: {⋯5		alphanumeric: sortFn_alphanumeric,6		datetime: sortFn_datetime,7		text: sortFn_text,8	},9});

sortFn: "basic" is a compile error until you add basic: sortFn_basic. A custom named comparator goes in the same object, and its key becomes a valid sortFn string:

1const features = tableFeatures({⋯2	rowSortingFeature,3	sortedRowModel: createSortedRowModel(),4	sortFns: {⋯5		alphanumeric: sortFn_alphanumeric,6		datetime: sortFn_datetime,7		text: sortFn_text,8		byAmountDesc: (rowA, rowB) => rowB.original.amount - rowA.original.amount,9	},10});

TanStack still exports the full sortFns, filterFns, and aggregationFns registries, but v9 marks them deprecated. Do not spread them into the slots; import the functions you use.

Step 5: read table.state

table.getState() is gone. The instance exposes state as a property, typed from the registered features: table.state.sorting exists only when the table registers rowSortingFeature.

Before:

1<Pagination pageSize={table.getState().pagination.pageSize} />

After:

1<Pagination pageSize={table.state.pagination.pageSize} />

Controlled state is unchanged: pass each slice through state and its on*Change callback (state: { sorting } with onSortingChange: setSorting, state: { globalFilter } with onGlobalFilterChange, state: { rowSelection } with onRowSelectionChange, state: { expanded } with onExpandedChange). initialState is unchanged.

v9 removed onStateChange. If a table used it to mirror the whole state, subscribe to the slices you need through their on*Change callbacks instead. For a subtree that should re-render on one slice, render table.Subscribe with a selector:

1<table.Subscribe selector={(state) => state.sorting}>⋯2	{(sorting) => <SortSummary sorting={sorting} />}3</table.Subscribe>

useTable(options) without a second argument re-renders the owning component on every state change, the same as v8. Leave it that way unless a profile shows a problem.

Step 6: add TFeatures to the types

Every instance type gains a leading TFeatures parameter: Column<TFeatures, TData, TValue>, Row<TFeatures, TData>, Table<TFeatures, TData>, ColumnDef<TFeatures, TData, TValue>, HeaderContext<TFeatures, TData, TValue>, and CellContext<TFeatures, TData, TValue>. TableOptions<TFeatures, TData> gains the same parameter, and features is a required key on it. A shared partial config either carries features or adds it to the Omit: Omit<TableOptions<typeof features, Payment>, "data" | "columns" | "features">. The tableOptions() helper keeps inference for such a config without the Omit: tableOptions({ features, autoResetPageIndex: false }).

For a helper that serves one table, pass typeof features:

Before:

1function PaymentsColGroup({ columns }: { columns: Column<Payment, unknown>[] }) {⋯2	return (3		<colgroup>⋯4			{columns.map((column) => (5				<col key={column.id} style={{ width: column.id === "email" ? "auto" : "15%" }} />6			))}7		</colgroup>8	);9}

After:

1function PaymentsColGroup({ columns }: { columns: Column<typeof features, Payment, unknown>[] }) {⋯2	return (3		<colgroup>⋯4			{columns.map((column) => (5				<col key={column.id} style={{ width: column.id === "email" ? "auto" : "15%" }} />6			))}7		</colgroup>8	);9}

For a helper shared across tables, make it generic over TFeatures extends TableFeatures. Inside it, only the core API is available (column.id, column.columnDef, row.original, table.getRowModel()), because TypeScript can't know which features the caller registered:

1import type { Column, Row, RowData, Table, TableFeatures } from "@ngrok/mantle/data-table";2 3function ColGroup<TFeatures extends TableFeatures, TData extends RowData>({⋯4	columns,5}: {⋯6	columns: Column<TFeatures, TData, unknown>[];7}) {⋯8	return (9		<colgroup>⋯10			{columns.map((column) => (11				<col key={column.id} />12			))}13		</colgroup>14	);15}16 17function rowCount<TFeatures extends TableFeatures, TData extends RowData>(18	table: Table<TFeatures, TData>,19) {⋯20	return table.getRowModel().rows.length;21}

A shared helper that needs a feature's API names the feature in its constraint and intersects the feature's column type. This is the shape mantle uses for DataTable.HeaderSortButton:

1import type {2	CellData,3	Column,4	Column_RowSorting,5	RowData,6	StockFeatures,7} from "@ngrok/mantle/data-table";8 9type SortableFeatures = Pick<StockFeatures, "rowSortingFeature">;10 11function sortLabel<12	TFeatures extends SortableFeatures,13	TData extends RowData,14	TValue extends CellData,15>(column: Column<TFeatures, TData, TValue> & Column_RowSorting<TFeatures, TData>) {⋯16	const sorted = column.getIsSorted();17	return sorted === false ? "unsorted" : sorted;18}

Do not intersect the alias with TableFeatures. Every key of TableFeatures is optional, so the bare Pick already satisfies Column's constraint. With the intersection, Column<SortableFeatures, …> claims every feature, and a consumer's compile error names an unrelated feature instead of sorting.

A wrapper that derives its props from ComponentProps<typeof DataTable.Row> needs one more change. ComponentProps erases the part's generics to their constraints, so renderExpanded comes out as (row: Row<TableFeatures, RowData>) => ReactNode. Row is invariant in TFeatures, so that callback cannot share a TFeatures with your concrete row. Omit both props and re-declare them against your features:

1type PaymentRowProps = Omit<ComponentProps<typeof DataTable.Row>, "row" | "renderExpanded"> & {⋯2	row: Row<typeof features, Payment>;3	renderExpanded?: (row: Row<typeof features, Payment>) => ReactNode;4};

Inside a column definition you rarely write these types by hand: props.column, props.row, and props.table in header and cell are already typed from the helper's typeof features.

Step 7: type the meta through the features object

ngrok's apps type table.options.meta today with an as cast or a runtime narrowing helper. v9 adds two type-only slots to tableFeatures: tableMeta types table.options.meta, and columnMeta types columnDef.meta. Pass metaHelper<T>() as the value. It returns a phantom value: TanStack strips it at runtime and reads only its type.

Before:

1type PaymentsTableMeta = { onDelete: (id: string) => void };2 3function getPaymentsTableMeta(meta: unknown): PaymentsTableMeta {⋯4	if (meta != null && typeof (meta as PaymentsTableMeta).onDelete === "function") {⋯5		return meta as PaymentsTableMeta;6	}7	throw new Error("Missing PaymentsTableMeta");8}9 10columnHelper.display({⋯11	id: "actions",12	cell: (props) => (13		<DataTable.ActionCell>⋯14			<IconButton⋯15				// …16				onClick={() =>17					getPaymentsTableMeta(props.table.options.meta).onDelete(props.row.original.id)18				}19			/>20		</DataTable.ActionCell>21	),22});23 24const table = useReactTable({⋯25	// …26	meta: { onDelete } satisfies PaymentsTableMeta,27});

After:

1type PaymentsTableMeta = { onDelete: (id: string) => void };2 3const features = tableFeatures({⋯4	rowSortingFeature,5	sortedRowModel: createSortedRowModel(),6	sortFns: {⋯7		alphanumeric: sortFn_alphanumeric,8		datetime: sortFn_datetime,9		text: sortFn_text,10	},11	tableMeta: metaHelper<PaymentsTableMeta>(),12});13 14const columnHelper = createColumnHelper<typeof features, Payment>();15 16columnHelper.display({⋯17	id: "actions",18	cell: (props) => (19		<DataTable.ActionCell>⋯20			<IconButton⋯21				// …22				onClick={() => props.table.options.meta?.onDelete(props.row.original.id)}23			/>24		</DataTable.ActionCell>25	),26});27 28const table = useTable({⋯29	features,30	// …31	meta: { onDelete },32});

options.meta stays optional on the type, so read it with ?.. Delete the narrowing helper and the satisfies clause: useTable rejects a meta that doesn't match PaymentsTableMeta.

columnMeta works the same way for per-column metadata:

1import { cx } from "@ngrok/mantle/cx";2 3type PaymentsColumnMeta = { align?: "start" | "end" };4 5const features = tableFeatures({⋯6	columnMeta: metaHelper<PaymentsColumnMeta>(),7});8 9const columnHelper = createColumnHelper<typeof features, Payment>();10 11columnHelper.accessor("amount", {⋯12	id: "amount",13	meta: { align: "end" },14	header: (props) => (15		<DataTable.Header className={cx(props.column.columnDef.meta?.align === "end" && "text-right")}>⋯16			Amount17		</DataTable.Header>18	),19});

If the app merged TableMeta or ColumnMeta through declare module "@tanstack/react-table", delete that declaration. The slot replaces it, and the global interface still applies to any table that has no slot.

Step 8: register column visibility

Column visibility was always on in v8. In v9 it's a feature: columnVisibility state, table.getVisibleLeafColumns(), table.getVisibleFlatColumns(), row.getVisibleCells(), column.getIsVisible(), and column.toggleVisibility() exist only when the table registers columnVisibilityFeature.

Before:

1const table = useReactTable({⋯2	getCoreRowModel: getCoreRowModel(),3	data,4	columns,5	state: { columnVisibility: { internalCost: showInternalColumns } },6});7 8<PaymentsColGroup columns={table.getVisibleLeafColumns()} />;

After:

1const features = tableFeatures({ columnVisibilityFeature });2 3const table = useTable({⋯4	features,5	data,6	columns,7	state: { columnVisibility: { internalCost: showInternalColumns } },8});9 10<PaymentsColGroup columns={table.getVisibleLeafColumns()} />;

If the table never hides a column, don't register the feature. Read table.getAllLeafColumns() and row.getAllCells() instead; both are core API. DataTable.Row, DataTable.EmptyRow, and DataTable.ExpandedRow work either way: they render visible cells when the table registers the feature and every cell when it doesn't.

Step 9: register row selection

Row selection was always on in v8. In v9, row.getIsSelected(), row.toggleSelected(), row.getToggleSelectedHandler(), table.getSelectedRowModel(), table.getIsAllRowsSelected(), table.getIsSomeRowsSelected(), table.toggleAllRowsSelected(), table.getToggleAllRowsSelectedHandler(), the rowSelection state slice, and the enableRowSelection option exist only when the table registers rowSelectionFeature.

Before:

1const [rowSelection, setRowSelection] = useState<RowSelectionState>({});2 3const table = useReactTable({⋯4	getCoreRowModel: getCoreRowModel(),5	data,6	columns,7	state: { rowSelection },8	onRowSelectionChange: setRowSelection,9	enableRowSelection: (row) => row.original.status !== "failed",10	getRowId: (row) => row.id,11});

After:

1const [rowSelection, setRowSelection] = useState<RowSelectionState>({});2 3const features = tableFeatures({ rowSelectionFeature });4 5const table = useTable({⋯6	features,7	data,8	columns,9	state: { rowSelection },10	onRowSelectionChange: setRowSelection,11	enableRowSelection: (row) => row.original.status !== "failed",12	getRowId: (row) => row.id,13});

enableRowSelection still defaults to true. RowSelectionState and every method above keep their v8 names; only the registration is new. See Row selection with checkboxes for the full recipe.

Step 10: pinning, sizing, and resizing

Mantle apps rarely use these. If yours does:

start and end are logical: in a left-to-right layout start is left and end is right.

Mantle parts and the features they need

Every DataTable part infers its generics from the table, column, or row you pass. You never write TFeatures by hand. Two parts refuse an instance from a table that lacks the feature they call, and the prop does not typecheck.

expandedRowId(row) accepts a Row<TFeatures, TData> from any table.

What not to do

• Do not import from @tanstack/react-table/legacy, and do not call useLegacyTable or legacyCreateColumnHelper. Mantle does not re-export them, and a direct import would need @tanstack/react-table in your package.json, which the app must not carry. The legacy layer is a v8 emulation with v9 costs, so a table that lands there still needs this migration later.
• Do not use the get*RowModel stubs (getCoreRowModel, getSortedRowModel, and the rest). They are deprecated markers for useLegacyTable, and the main entry does not export them. import { getCoreRowModel } from "@ngrok/mantle/data-table" is a compile error.
• Do not spread stockFeatures into every table. It defeats tree-shaking and hides which features a table depends on.
• Do not call table.getState(). It no longer exists.
• Do not cast table.options.meta. Type it through tableMeta.
• Do not add @tanstack/react-table as a direct dependency. Every export you need comes from @ngrok/mantle/data-table.

Find/replace recipe

Apply these in order. Each row is a mechanical edit; the notes call out the ones that need a second look.

Example: complete before/after

A list page with sorting, a search box, page controls, and a delete action that reaches the page through meta.

Before:

1import { IconButton } from "@ngrok/mantle/button";2import {3	DataTable,4	createColumnHelper,5	getCoreRowModel,6	getFilteredRowModel,7	getPaginationRowModel,8	getSortedRowModel,9	useReactTable,10} from "@ngrok/mantle/data-table";11import { TrashIcon } from "@phosphor-icons/react/Trash";12import { useState } from "react";13 14type Payment = { id: string; amount: number; email: string; createdAt: Date };15type PaymentsTableMeta = { onDelete: (id: string) => void };16 17const columnHelper = createColumnHelper<Payment>();18 19const columns = [⋯20	columnHelper.accessor("email", {⋯21		id: "email",22		header: (props) => (23			<DataTable.Header column={props.column}>⋯24				<DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">⋯25					Email26				</DataTable.HeaderSortButton>27			</DataTable.Header>28		),29		cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,30	}),31	columnHelper.accessor("createdAt", {⋯32		id: "createdAt",33		sortingFn: "datetime",34		header: (props) => (35			<DataTable.Header column={props.column}>⋯36				<DataTable.HeaderSortButton column={props.column} sortingMode="time">⋯37					Created38				</DataTable.HeaderSortButton>39			</DataTable.Header>40		),41		cell: (props) => <DataTable.Cell>{props.getValue().toLocaleDateString()}</DataTable.Cell>,42	}),43	columnHelper.display({⋯44		id: "actions",45		header: () => <DataTable.ActionHeader />,46		cell: (props) => (47			<DataTable.ActionCell>⋯48				<IconButton⋯49					appearance="ghost"50					intent="neutral"51					type="button"52					size="sm"53					label="Delete payment"54					icon={<TrashIcon />}55					onClick={() =>56						(props.table.options.meta as PaymentsTableMeta).onDelete(props.row.original.id)57					}58				/>59			</DataTable.ActionCell>60		),61	}),62];63 64function PaymentsTable({ data, onDelete }: { data: Payment[]; onDelete: (id: string) => void }) {⋯65	const [globalFilter, setGlobalFilter] = useState("");66	const table = useReactTable({⋯67		data,68		columns,69		getCoreRowModel: getCoreRowModel(),70		getFilteredRowModel: getFilteredRowModel(),71		getPaginationRowModel: getPaginationRowModel(),72		getSortedRowModel: getSortedRowModel(),73		state: { globalFilter },74		onGlobalFilterChange: setGlobalFilter,75		initialState: { pagination: { pageIndex: 0, pageSize: 10 } },76		meta: { onDelete } satisfies PaymentsTableMeta,77	});78	const rows = table.getRowModel().rows;79	const pageSize = table.getState().pagination.pageSize;80 81	return (82		<>⋯83			<DataTable.Root table={table}>⋯84				<DataTable.Head />85				<DataTable.Body>⋯86					{rows.length > 0 ? (87						rows.map((row) => <DataTable.Row key={row.id} row={row} />)88					) : (89						<DataTable.EmptyRow>No payments.</DataTable.EmptyRow>90					)}91				</DataTable.Body>92			</DataTable.Root>93			<p>{pageSize} per page</p>94		</>95	);96}

After:

1import { IconButton } from "@ngrok/mantle/button";2import {3	DataTable,4	columnFilteringFeature,5	createColumnHelper,6	createFilteredRowModel,7	createPaginatedRowModel,8	createSortedRowModel,9	globalFilteringFeature,10	metaHelper,11	rowPaginationFeature,12	rowSortingFeature,13	sortFn_alphanumeric,14	sortFn_datetime,15	sortFn_text,16	tableFeatures,17	useTable,18} from "@ngrok/mantle/data-table";19import { TrashIcon } from "@phosphor-icons/react/Trash";20import { useState } from "react";21 22type Payment = { id: string; amount: number; email: string; createdAt: Date };23type PaymentsTableMeta = { onDelete: (id: string) => void };24 25const features = tableFeatures({⋯26	columnFilteringFeature,27	globalFilteringFeature,28	rowPaginationFeature,29	rowSortingFeature,30	filteredRowModel: createFilteredRowModel(),31	paginatedRowModel: createPaginatedRowModel(),32	sortedRowModel: createSortedRowModel(),33	sortFns: {⋯34		alphanumeric: sortFn_alphanumeric,35		datetime: sortFn_datetime,36		text: sortFn_text,37	},38	tableMeta: metaHelper<PaymentsTableMeta>(),39});40 41const columnHelper = createColumnHelper<typeof features, Payment>();42 43const columns = columnHelper.columns([⋯44	columnHelper.accessor("email", {⋯45		id: "email",46		header: (props) => (47			<DataTable.Header column={props.column}>⋯48				<DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">⋯49					Email50				</DataTable.HeaderSortButton>51			</DataTable.Header>52		),53		cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,54	}),55	columnHelper.accessor("createdAt", {⋯56		id: "createdAt",57		sortFn: "datetime",58		header: (props) => (59			<DataTable.Header column={props.column}>⋯60				<DataTable.HeaderSortButton column={props.column} sortingMode="time">⋯61					Created62				</DataTable.HeaderSortButton>63			</DataTable.Header>64		),65		cell: (props) => <DataTable.Cell>{props.getValue().toLocaleDateString()}</DataTable.Cell>,66	}),67	columnHelper.display({⋯68		id: "actions",69		header: () => <DataTable.ActionHeader />,70		cell: (props) => (71			<DataTable.ActionCell>⋯72				<IconButton⋯73					appearance="ghost"74					intent="neutral"75					type="button"76					size="sm"77					label="Delete payment"78					icon={<TrashIcon />}79					onClick={() => props.table.options.meta?.onDelete(props.row.original.id)}80				/>81			</DataTable.ActionCell>82		),83	}),84]);85 86function PaymentsTable({ data, onDelete }: { data: Payment[]; onDelete: (id: string) => void }) {⋯87	const [globalFilter, setGlobalFilter] = useState("");88	const table = useTable({⋯89		features,90		data,91		columns,92		state: { globalFilter },93		onGlobalFilterChange: setGlobalFilter,94		initialState: { pagination: { pageIndex: 0, pageSize: 10 } },95		meta: { onDelete },96	});97	const rows = table.getRowModel().rows;98	const pageSize = table.state.pagination.pageSize;99 100	return (101		<>⋯102			<DataTable.Root table={table}>⋯103				<DataTable.Head />104				<DataTable.Body>⋯105					{rows.length > 0 ? (106						rows.map((row) => <DataTable.Row key={row.id} row={row} />)107					) : (108						<DataTable.EmptyRow>No payments.</DataTable.EmptyRow>109					)}110				</DataTable.Body>111			</DataTable.Root>112			<p>{pageSize} per page</p>113		</>114	);115}

The JSX is identical. The diff is the imports, the features object, the helper's type arguments, the columnHelper.columns wrapper, sortFn, the meta read, and table.state.

Checklist

Work through this for every file that imports from @ngrok/mantle/data-table:

• @tanstack/react-table is not in the app's package.json, and no file imports from it or from @tanstack/react-table/legacy.
• Every useReactTable is useTable, and every call passes features.
• Every features object is built with tableFeatures at module scope.
• No getCoreRowModel remains.
• Every get*RowModel() option is now a feature plus a row-model slot inside tableFeatures.
• A table with a global filter registers both columnFilteringFeature and globalFilteringFeature.
• A table whose column filters use "auto" or a string name registers a filterFns slot, with includesString: filterFn_includesString for the "auto" default on string columns.
• A grouped table whose group rows show a total registers rowAggregationFeature, and sum: aggregationFn_sum in aggregationFns when those columns use "auto" (extent: aggregationFn_extent for Date columns).
• Every createColumnHelper<T>() is createColumnHelper<typeof features, T>().
• Every column array, including one a function returns, goes through columnHelper.columns([…]).
• Every sortingFn is sortFn, and every sortable table registers its comparators in the sortFns slot.
• No table.getState() or onStateChange remains.
• Every Column, Row, Table, ColumnDef, HeaderContext, CellContext, and TableOptions type has its TFeatures argument.
• Every wrapper typed from ComponentProps<typeof DataTable.Row> omits and re-declares row and renderExpanded.
• Every table that reads table.options.meta types it through tableMeta: metaHelper<T>(), with no as cast and no declare module.
• A table that reads columnVisibility, getVisibleLeafColumns(), or getVisibleCells() registers columnVisibilityFeature.
• A table that selects rows registers rowSelectionFeature.
• A table that pins, sizes, or resizes columns registers the matching feature and uses start and end.
• Every DataTable.HeaderSortButton sits in a table with rowSortingFeature, and every DataTable.RowExpandButton sits in a table with rowExpandingFeature.
• tsc passes, and the table sorts, filters, paginates, expands, selects, and totals its group rows the way it did before.