MRT logoMantine React Table

Column DnD Ordering Example

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

First Name
Last Name
Address
City
State
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

Rows per page

1-5 of 5

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },

      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },

      {
        accessorKey: 'state',
        enableColumnOrdering: false, //disable column ordering for this column,
        header: 'State',
      },
    ],
    [],
  );

  return (
    <MantineReactTable columns={columns} data={data} enableColumnOrdering />
  );
};

export default Example;

View Extra Storybook Examples