Migration from @ackplus/react-tanstack-data-table

This package is the successor to the deprecated @ackplus/react-tanstack-data-table. Same mental model and the same apiRef, but the grid now renders as <div> + CSS Grid (not an HTML <table>), theming is MUI-native + tokens, and some props are renamed. Old names keep working as deprecated aliases, so you can migrate gradually.

1. Install

npm install @ackplus/mui-tanstack-data-grid
npm uninstall @ackplus/react-tanstack-data-table

- import { DataTable } from '@ackplus/react-tanstack-data-table';
+ import { DataTable } from '@ackplus/mui-tanstack-data-grid';

2. Prop renames

v1	v2	Notes
tableSize="small"	density="compact"	small→compact, medium→standard
enableTableSizeControl	enableDensitySelector
enableStripes	striped
enableHover	hover
enableStickyHeaderOrFooter	stickyHeader	+ stickyFooter
enableColumnDragging	enableColumnReordering
onColumnDragEnd	onColumnOrderChange	same payload
enableExpanding	enableRowExpansion
renderSubComponent	renderDetailPanel	same signature
bulkActions	renderBulkActions	same signature
totalRow	rowCount	server total
estimateRowHeight	estimatedRowHeight
emptyMessage	noRowsMessage
tableProps	slotProps.grid	typed, no more any
tableContainerProps	slotProps.scroller	typed

3. Behaviour changes

• The grid renders as <div>s with ARIA roles, not a <table>. CSS that targeted table/td/ .MuiTable-* should move to tokens, MuiTanstackDataGrid style overrides, or slotProps.
• Column minSize/maxSize are now respected, and resizing no longer redistributes neighbouring columns.
• Density names changed (small/medium → compact/standard/comfortable).
• Excel export lazy-loads xlsx on first use; the API is unchanged.

4. Imperative handle: ref → apiRef

The imperative API (its namespaces and method names) is unchanged — but how you obtain it changed. In v1, <DataTable> was a forwardRef component, so you read the handle off a React ref. In v2, <DataTable> is a plain function component that does not accept a ref; it exposes the handle through a dedicated apiRef prop instead.

- const ref = useRef<DataTableApi<Row>>(null);
- <DataTable ref={ref} columns={columns} data={rows} />;
+ const apiRef = useRef<DataTableApi<Row> | null>(null);
+ <DataTable apiRef={apiRef} columns={columns} data={rows} />;

Once wired, apiRef.current gives you the same API as before (apiRef.current?.selection.selectAll(), apiRef.current?.export.toCsv(), etc.).

:::note State persistence v1's stateKey lived on the example app's DataGrid wrapper. Since 1.5.0 stateKey is a first-class <DataTable> prop — pass it directly and the grid persists view state for you (see State persistence). For v1's defaultHiddenColumns, map the hidden names into initialState.columnVisibility. :::