MRT logoMaterial React Table

    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, Material React Table has a simple API for this.

    Relevant Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean
    false

    No Description Provided... Yet...

    2
    boolean

    No Description Provided... Yet...

    3

    No Description Provided... Yet...

    4

    No Description Provided... Yet...

    5

    No Description Provided... Yet...

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    boolean

    Enable or disable column dragging for this column.

    2
    boolean

    No Description Provided... Yet...

    Relevant State

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

    No Description Provided... Yet...

    2
    MRT_Column | null

    No Description Provided... Yet...

    3
    MRT_Column | null

    No Description Provided... Yet...

    Change the Default Column Order

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

    <MaterialReactTable
    data={data}
    columns={columns}
    enableRowSelection
    initialState={{
    columnOrder: [
    'name',
    'email',
    'phone',
    'city',
    'country',
    'mrt-select-row', //move the built-in selection column to the end of the table
    ],
    }}
    />

    Enable Column Ordering with Drag and Drop

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

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


    Demo

    Open Code SandboxOpen on GitHub
    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

    Source Code

    1import React, { FC, useMemo } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { data, Person } from './makeData';
    4
    5const Example: FC = () => {
    6 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    7 () => [
    8 {
    9 accessorKey: 'firstName',
    10 header: 'First Name',
    11 },
    12 {
    13 accessorKey: 'lastName',
    14 header: 'Last Name',
    15 },
    16 //column definitions...
    26 {
    27 accessorKey: 'state',
    28 enableColumnOrdering: false, //disable column ordering for this column,
    29 header: 'State',
    30 },
    31 ],
    32 [],
    33 );
    34
    35 return (
    36 <MaterialReactTable columns={columns} data={data} enableColumnOrdering />
    37 );
    38};
    39
    40export default Example;
    41

    View Extra Storybook Examples