MRT logoMaterial React Table

    Column Resizing Feature Guide

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

    Relevant Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    'onEnd' | 'onChange'
    'onEnd'
    TanStack Table Column Sizing Docs

    Determines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle.

    2
    Partial<MRT_ColumnDef<TData>>

    Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc.

    3
    boolean

    No Description Provided... Yet...

    4
    OnChangeFn<ColumnSizingState>
    TanStack Table Column Sizing Docs

    This optional function will be called when the columnSizing state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizing table option.

    5
    OnChangeFn<ColumnSizingInfoState>
    TanStack Table Column Sizing Docs

    This optional function will be called when the columnSizingInfo state changes. If you provide this function, you will be responsible for maintaining its state yourself. You can pass this state back to the table via the state.columnSizingInfo table option.

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    boolean

    No Description Provided... Yet...

    2
    number
    1000

    No Description Provided... Yet...

    3
    number
    40

    No Description Provided... Yet...

    4
    number
    180

    No Description Provided... Yet...

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1
    Record<string, number>
    {}
    TanStack Table Column Sizing Docs

    No Description Provided... Yet...

    2
    See TanStack Docs
    {}
    TanStack Table Column Sizing Docs

    No Description Provided... Yet...

    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: 200, //max size enforced during resizing
    size: 180, //medium column
    },
    {
    accessorKey: 'email',
    header: 'Email',
    size: 300, //large column
    },
    ];

    You may notice however, that the columns may be not change their size as much as you would expect. This is because the browser treats <th> and <td> elements differently with in a <table> element by default.

    You can improve this slightly by changing the table layout to fixed instead of the default auto in the muiTableProps.

    <MaterialReactTable
    muiTableProps={{
    sx: {
    tableLayout: 'fixed',
    },
    }}
    />

    The Columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.

    For further reading on how table-layout fixed vs auto works, we recommend this blog post by CSS-Tricks.

    Default Column

    By default, columns will have these 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.

    <MaterialReactTable
    columns={columns}
    data={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.

    <MaterialReactTable columns={columns} data={data} enableColumnResizing />

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

    When Column Resizing is enabled, a CSS table-layout: fixed style is automatically added to the <table> element in order to make the browser respect the widths of the columns more.

    Column Resize Mode

    The default columnResizeMode is onEnd, which means that the column resizing will only occur after the user has finished dragging the column resize handle and released their mouse. You can change the columnResizeMode to onChange to make the column resizing occur immediately as the user drags the column resize handle.

    <MaterialReactTable
    columns={columns}
    data={data}
    enableColumnResizing
    columnResizeMode="onChange"
    />

    Column Resizing Example


    Demo

    Open Code SandboxOpen on GitHub
    First Name

    Last Name
    Email Address

    City

    Country

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

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