MRT logoMaterial React Table

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 StackblitzOpen Code SandboxOpen on GitHub
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

1-5 of 5

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...
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