Column Dnd Ordering Material React Table Example

Column DnD Ordering Example

Material React Table has built-in support for column drag and drop re-ordering. Learn more about column ordering in the Column Ordering Feature Guide.

More Examples

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