Column Ordering/DnD Feature Guide - Mantine React Table 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, Mantine 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, Mantine React Table will order the columns in the order they are defined in the columns definition. 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 props.

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

const table = useMantineReactTable({
  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
    ],
  },
});

Manage Column Order State

If you need to manage the columnOrder state yourself, you can do so in the state table option and onColumnOrderChange callback, but you will also need to initialize the columnOrder state yourself.

const columns = [
  //...
];

//easy shortcut to initialize the columnOrder state as array of column ids
const [columnOrder, setColumnOrder] = useState(
  columns.map((c) => c.accessorKey), //array of column ids
);

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

return <MantineReactTable table={table} />;

Enable Column Ordering with Drag and Drop

Mantine 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

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

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data, type Person } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7
    () => [
8
      {
9
        accessorKey: 'firstName',
10
        header: 'First Name',
11
      },
12
      {
13
        accessorKey: 'lastName',
14
        header: 'Last Name',
15
      },
16

17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25

26
      {
27
        accessorKey: 'state',
28
        enableColumnOrdering: false, //disable column ordering for this column,
29
        header: 'State',
30
      },
31
    ],
32
    [],
33
  );
34

35
  return (
36
    <MantineReactTable columns={columns} data={data} enableColumnOrdering />
37
  );
38
};
39

40
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo(
7
    () => [
8
      {
9
        accessorKey: 'firstName',
10
        header: 'First Name',
11
      },
12
      {
13
        accessorKey: 'lastName',
14
        header: 'Last Name',
15
      },
16

17
      {
18
        accessorKey: 'address',
19
        header: 'Address',
20
      },
21
      {
22
        accessorKey: 'city',
23
        header: 'City',
24
      },
25

26
      {
27
        accessorKey: 'state',
28
        enableColumnOrdering: false, //disable column ordering for this column,
29
        header: 'State',
30
      },
31
    ],
32
    [],
33
  );
34

35
  return (
36
    <MantineReactTable columns={columns} data={data} enableColumnOrdering />
37
  );
38
};
39

40
export default Example;

View Extra Storybook Examples

Note: Drag and Drop is not currently supported on mobile touch devices.