MRT logoMaterial React Table

On This Page

    Column Resizing Feature Guide

    Material React Table lets you easily change the default widths (sizes) of columns and has a built-in column resizing draggable handle feature.

    Relevant Table Options

    1
    'onEnd' | 'onChange'
    'onChange'
    MRT Column Resizing Docs
    2
    Partial<MRT_ColumnDef<TData>>
    TanStack Table Core Table Docs
    3
    boolean
    MRT Column Resizing Docs
    4
    'semantic' | 'grid' | 'grid-no-grow'
    'semantic' //(changes based on other enabled features)
    TODO
    5
    OnChangeFn<ColumnSizingState>
    TanStack Table Column Sizing Docs
    6
    OnChangeFn<ColumnSizingInfoState>
    TanStack Table Column Sizing Docs

    Relevant Column Options

    1
    boolean
    2
    number
    1000
    3
    number
    40
    4
    number
    180

    Relevant State

    1
    Record<string, number>
    {}
    TanStack Table Column Sizing Docs
    2
    See TanStack Docs
    {}
    TanStack Table Column Sizing Docs

    Layout Modes

    Material React Table has 3 layout modes that affect how columns styles are applied internally. Depending on which features you enable, the layoutMode table option will automatically change to the appropriate value, though you can override it with your own value if you want.

    1. "semantic" (default with default features) - uses default css styles that come with <table>, <tr>, <td>, etc. elements.

    2. "grid" (default when virtualization is enabled) - uses CSS Grid and Flexbox styles instead of default styles.

    3. "grid-no-grow" (default when column resizing is enabled) - uses CSS Grid and Flexbox styles, but also sets flex-grow: 0 on all columns.

    Change Default Column Widths

    Column Size

    This was also covered in the Data Columns Guide, but we'll cover it again here.

    You can change the width of any column by setting its size option on the column definition. minSize and maxSize are also available to enforce limits during resizing.

    const columns = [
    {
    accessorKey: 'id',
    header: 'ID',
    size: 50, //small column
    },
    {
    accessorKey: 'username',
    header: 'Username',
    minSize: 100, //min size enforced during resizing
    maxSize: 400, //max size enforced during resizing
    size: 180, //medium column
    },
    {
    accessorKey: 'email',
    header: 'Email',
    size: 300, //large column
    },
    ];

    Default Column

    By default, columns will have the following size properties defined:

    defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }; //units are in px

    You can modify the default column widths by setting the defaultColumn prop on the table.

    const table = useMaterialReactTable({
    columns,
    data,
    defaultColumn: {
    minSize: 20, //allow columns to get smaller than default
    maxSize: 9001, //allow columns to get larger than default
    size: 260, //make columns wider by default
    },
    });

    Enable Column Resizing Feature

    enableColumnResizing is the boolean prop that enables the column resizing feature.

    const table = useMaterialReactTable({
    columns,
    data,
    enableColumnResizing: true,
    });
    return <MaterialReactTable table={table} />;

    You can disable specific columns from being resizable by setting the enableResizing column option to false in their respective column definition.

    Column Resize Mode

    The default columnResizeMode is onChange (in MRT versions v1.7+), which means that the column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the columnResizeMode to onEnd instead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.

    const table = useMaterialReactTable({
    columns,
    data,
    enableColumnResizing: true,
    columnResizeMode: 'onEnd', //instead of the default "onChange" mode
    });

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub




    DylanMurraydmurray@yopmail.comEast DaphneUSA
    RaquelKohlerrkholer33@yopmail.comColumbusUSA
    ErvinReingerereinger@mailinator.comTorontoCanada
    BrittanyMcCulloughbmccullough44@mailinator.comLincolnUSA
    BransonFramibframi@yopmain.comNew YorkUSA

    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', //uses the default width from defaultColumn prop
    15 },
    16 {
    17 accessorKey: 'lastName',
    18 header: 'Last Name',
    19 },
    20 {
    21 accessorKey: 'email',
    22 header: 'Email Address',
    23 size: 250, //increase the width of this column
    24 },
    25 {
    26 accessorKey: 'city',
    27 header: 'City',
    28 size: 200, //decrease the width of this column
    29 enableResizing: false, //disable resizing for this column
    30 },
    31 {
    32 accessorKey: 'country',
    33 header: 'Country',
    34 size: 140, //decrease the width of this column
    35 },
    36 ],
    37 [],
    38 );
    39
    40 const table = useMaterialReactTable({
    41 columns,
    42 data,
    43 //optionally override the default column widths
    44 defaultColumn: {
    45 maxSize: 400,
    46 minSize: 80,
    47 size: 160, //default size is usually 180
    48 },
    49 enableColumnResizing: true,
    50 columnResizeMode: 'onChange', //default
    51 });
    52
    53 return <MaterialReactTable table={table} />;
    54};
    55
    56export default Example;
    57

    Enable Column Growing

    MRT V2 has a new "opposite" behavior in regards to column sizes when column resizing is enabled compared to MRT V2

    When column resizing is enabled, by default, a layoutMode of "grid-no-grow" will be applied internally. This means that columns will have an absolute size and they will not grow to fill in the remaining space of the table.

    const table = useMaterialReactTable({
    columns,
    data,
    enableColumnResizing: true,
    layoutMode: 'grid', //instead of the default "grid-no-grow" when column resizing is enabled
    });

    View Extra Storybook Examples