MRT logoMaterial React Table

Legacy V2 Docs

Row DnD Ordering Example

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

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
DylanMurrayEast Daphne
RaquelKohlerColumbus
ErvinReingerSouth Linda
BrittanyMcCulloughLincoln
BransonFramiCharleston

Source Code

1import { useMemo, useState } from 'react';
2import {
3 useMaterialReactTable,
4 type MRT_ColumnDef,
5 type MRT_Row,
6 MRT_TableContainer,
7} from 'material-react-table';
8import { data as initData, type Person } from './makeData';
9
10const Example = () => {
11 const columns = useMemo<MRT_ColumnDef<Person>[]>(
12 //column definitions...
29 );
30
31 const [data, setData] = useState(() => initData);
32
33 const table = useMaterialReactTable({
34 autoResetPageIndex: false,
35 columns,
36 data,
37 enableRowOrdering: true,
38 enableSorting: false,
39 muiRowDragHandleProps: ({ table }) => ({
40 onDragEnd: () => {
41 const { draggingRow, hoveredRow } = table.getState();
42 if (hoveredRow && draggingRow) {
43 data.splice(
44 (hoveredRow as MRT_Row<Person>).index,
45 0,
46 data.splice(draggingRow.index, 1)[0],
47 );
48 setData([...data]);
49 }
50 },
51 }),
52 });
53
54 return <MRT_TableContainer table={table} />;
55};
56
57export default Example;
58

View Extra Storybook Examples