Migrating from Material React Table

The data table follows Material React Table (MRT) closely: the same hook-then-component shape, most of the same options, and the same TanStack Table underneath. Moving a table over is mostly renaming. This page lists what changes.

The basics

// Material React Table
const table = useMaterialReactTable({ columns, data })
return <MaterialReactTable table={table} />

// This data table
const table = useDataTable({ columns, data, getRowId: (row) => row.id })
return <DataTable table={table} />

• Type columns with DataTableColumnDef<TData> instead of MRT_ColumnDef<TData>.
• Pass getRowId — row selection, editing and pinning key rows by id.
• The table runs on TanStack Table v9, MRT on v8. The column options you share with TanStack (accessorKey, cell, header, footer, sortFn, filterFn, enableSorting, …) keep TanStack's names; v9 renames a few v8 ones, such as sortingFn → sortFn.

Column options

MRT puts its own column options on the column definition. Here they live under meta.

Component props (mui*Props)

MRT's mui*Props become one slotProps option. Each part takes props or a function of its context, and merges them with the table's own. See Part props.

State

Set and control state the same way: initialState, state, and the matching on…Change callback (onIsFullScreenChange → onIsFullscreenChange, onColumnFilterFnsChange → onColumnFilterModesChange, onGlobalFilterFnChange → onGlobalFilterModeChange). See State management.

Table options

Most options keep their MRT names: enableRowSelection, enableMultiRowSelection, enableBatchRowSelection, enableSelectAll, selectAllMode, enableEditing, editDisplayMode, createDisplayMode, positionCreatingRow, enableGrouping, enableColumnPinning, enableRowPinning, enableColumnOrdering, enableColumnResizing, enableRowOrdering, enableRowNumbers, enableRowVirtualization, enableColumnVirtualization, rowVirtualizerOptions, columnVirtualizerOptions, enableStickyHeader, enableStickyFooter, enableTableHead, enableTableFooter, enableExpandAll, enableColumnFilterModes, enableGlobalFilterModes, enableGlobalFilterRankedResults, enableFacetedValues, enableFilterMatchHighlighting, enableClickToCopy, enableCellActions, enableDensityToggle, enableFullScreenToggle → enableFullscreenToggle, enableTopToolbar, enableBottomToolbar, enableToolbarInternalActions, columnFilterDisplayMode, paginationDisplayMode, positionPagination, positionGlobalFilter, positionActionsColumn, positionExpandColumn, positionToolbarAlertBanner, positionToolbarDropZone, displayColumnDefOptions, defaultDisplayColumn, filterFns, aggregationFns, columnFilterModeOptions, globalFilterModeOptions, localization, icons.

Renamed or reshaped:

Callbacks and render options with the same name and arguments: onEditingRowCancel, onCreatingRowCancel, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, renderToolbarInternalActions, renderTopToolbar, renderBottomToolbar, renderRowActions, renderDetailPanel, renderCaption, renderEditRowDialogContent, renderCreateRowDialogContent, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, and the menu callbacks renderColumnActionsMenuItems, renderRowActionMenuItems, renderCellActionMenuItems (each receives internalMenuItems and closeMenu).

The table instance

The instance is stable and the component that calls useDataTable does not re-render on state changes. Read state where you render it with table.Subscribe, or pass stateSelector. See State management.

Defaults that differ

Set the MRT value explicitly to keep the old behavior.

Not here (yet)

• rowPinningDisplayMode values "sticky" and "select-sticky" (rows that stick in place); use "top-and-bottom" or "select-top".
• enableColumnDragging as a separate switch.
• MRT's enableRowDragging works through DataTableDndProvider and onRowDragEnd here; see Row dragging.
• MUI theming: the table uses your shadcn/ui components and theme instead.

Related