Column Ordering/DnD Guide - Material React Table V2 Docs

Column Ordering (DnD) Feature Guide

Whether you just want to change the default column order in your table or let columns be reordered by dragging and dropping, Material React Table has a simple API for this.

Relevant Table Options

#	Type	Default Value	More Info Links
1	boolean	false	MRT Column Ordering DnD Docs

2	boolean		MRT Column Ordering DnD Docs

3	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

4	OnChangeFn<MRT_Column<TData> \| null>

5	OnChangeFn<MRT_Column<TData> \| null>

Relevant Column Options

	#	Column Option	Type	Default Value	More Info Links
	1		boolean

	2		boolean

Relevant State

#	Type	Default Value	More Info Links
1	Array<string>	[]	TanStack Table Column Ordering Docs

2	MRT_Column \| null

3	MRT_Column \| null

Change the Default Column Order

By Default, Material React Table will order the columns in the order they are defined in the columns table option. And Display Columns such as Actions, Selection, Expansion, etc., get added to either the beginning or the end of the table. You can customize all of this by defining your own columnOrder state and passing it either to the initialState or state table options.

The columnOrder state is an array of string column ids, that come from the ids or accessorKeys that you defined in your column definitions.

If you are enabling features that generate built-in MRT display columns such as enableRowSelection, enableRowNumbers, enableRowActions, etc., you should include those column ids in your columnOrder state at the index you want them to appear in the table. If you do not include them, MRT should automatically insert them at either the beginning or the end of the table just fine, but it might not be in the order you want.

See the Display Columns Guide for more information on what "mrt-row-\*" column ids are available.

const table = useMaterialReactTable({
  data,
  columns,
  enableRowSelection: true,
  initialState: {
    columnOrder: [
      'name',
      'email',
      'phone',
      'city',
      'country',
      'mrt-row-select', //move the built-in selection column to the end of the table
    ],
  },
});

return <MaterialReactTable table={table} />;

Note: If the number of columns and the length of the columnOrder state do not match, MRT will automatically re-generate the columnOrder state internally as of v2.10.0.

Manage Column Order State

If you need easier access to the columnOrder state, you can store the column order in your own state management, and then pass it back into the MRT state table option and sync back up internal mutations with the onColumnOrderChange callback.

You should also should initialize the columnOrder state yourself for the best results. Though, as of v2.10.0, if you do not initialize the columnOrder state, as Material React Table will generate a default column order for you based on the order of the columns passed in the columns option, so you only need to properly initialize the column order state if there is a problem with the default order.

const columns = [
  //...
];

//easy shortcut to initialize the columnOrder state as array of column ids
const [columnOrder, setColumnOrder] = useState(
  ['mrt-row-select', ...columns.map((c) => c.accessorKey)], //array of column ids (Initializing is optional as of v2.10.0)
);

const table = useMaterialReactTable({
  data,
  columns,
  enableRowSelection: true,
  state: {
    columnOrder,
  },
  onColumnOrderChange: setColumnOrder,
});

return <MaterialReactTable table={table} />;

Enable Column Ordering with Drag and Drop

Material React Table has a built-in drag and drop feature to reorder columns. This feature is enabled by passing the enableColumnOrdering table option.

The ability for a column to have a drag and drop handle can be specified by setting the enableColumnOrdering option on the column.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Rows per page

1-5 of 5

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

Source Code

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    () => [
12      {
13        accessorKey: 'firstName',
14        header: 'First Name',
15      },
16      //column definitions...
17      {
18        accessorKey: 'lastName',
19        header: 'Last Name',
20      },
21      {
22        accessorKey: 'address',
23        header: 'Address',
24      },
25      {
26        accessorKey: 'city',
27        header: 'City',
28      },
29      
30      {
31        accessorKey: 'state',
32        enableColumnOrdering: false, //disable column ordering for this column,
33        header: 'State',
34      },
35    ],
36    [],
37  );
38
39  const table = useMaterialReactTable({
40    columns,
41    data,
42    enableColumnOrdering: true,
43  });
44
45  return <MaterialReactTable table={table} />;
46};
47
48export default Example;
49

View Extra Storybook Examples