MRT logoMantine React Table

On This Page

    Column Ordering (DnD) Feature Guide

    Whether you just want to change the default column order in your table or let columns be reordered by dragging and dropping, Mantine React Table has a simple API for this.

    Relevant Table Options

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1booleanfalseMRT Column Ordering DnD Docs
    2booleanMRT Column Ordering DnD Docs
    3OnChangeFn<ColumnOrderState>TanStack Table Column Ordering Docs
    4OnChangeFn<MRT_Column<TData> | null>
    5OnChangeFn<MRT_Column<TData> | null>

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1boolean
    2boolean

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1Array<string>[]TanStack Table Column Ordering Docs
    2MRT_Column | null
    3MRT_Column | null

    Change the Default Column Order

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

    const table = useMantineReactTable({
      data,
      columns,
      enableRowSelection: true,
      initialState: {
        columnOrder: [
          'name',
          'email',
          'phone',
          'city',
          'country',
          'mrt-row-select', //move the built-in selection column to the end of the table
        ],
      },
    });

    Manage Column Order State

    If you need to manage the columnOrder state yourself, you can do so in the state table option 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
    );
    
    const table = useMantineReactTable({
      data,
      columns,
      enableRowSelection: true,
      state: {
        columnOrder,
      },
      onColumnOrderChange: setColumnOrder,
    });
    
    return <MantineReactTable table={table} />;

    Enable Column Ordering with Drag and Drop

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

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

    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

    Note: Drag and Drop is not currently supported on mobile touch devices.