Material React Table

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.

boolean

false

boolean

OnChangeFn<ColumnOrderState>

OnChangeFn<MRT_Column<TData> | null>

OnChangeFn<MRT_Column<TData> | null>

boolean

boolean

Array<string>

[]

MRT_Column | null

MRT_Column | null

By Default, Material React Table will order the columns in the order they are defined in the columns prop. 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.

<MaterialReactTable
  data={data}
  columns={columns}
  enableRowSelection
  initialState={{
    columnOrder: [
      'name',
      'email',
      'phone',
      'city',
      'country',
      'mrt-row-select', //move the built-in selection column to the end of the table
    ],
  }}
/>

If you need to manage the columnOrder state yourself, you can do so in the state prop 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
);

return (
  <MaterialReactTable
    data={data}
    columns={columns}
    enableRowSelection
    state={state}
    onColumnOrderChange={onColumnOrderChange}
  />
);

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

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

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { data, type Person } from './makeData';
4
5const 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      //column definitions...
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    <MaterialReactTable columns={columns} data={data} enableColumnOrdering />
37  );
38};
39
40export default Example;
41

View Extra Storybook Examples