MRT logoMaterial React Table

On This Page

    Column Resizing Feature Guide

    Material React Table has a built-in column resizing draggable handle feature.

    The Column Size features was recently split into its own Guide. View that guide as a prerequisite to this one.

    Relevant Table Options

    1
    'ltr' | 'rtl'
    muiTheme.direction || 'ltr'
    MRT Column Resizing Docs
    2
    'onEnd' | 'onChange'
    'onChange'
    MRT Column Resizing Docs
    3
    Partial<MRT_ColumnDef<TData>>
    TanStack Table Core Table Docs
    4
    Partial<MRT_DisplayColumnDef<TData>>
    MRT Display Columns Docs
    5
    { [key: string]: MRT_DisplayColumnDef<TData> }
    MRT Display Columns Docs
    6
    boolean
    MRT Column Resizing Docs
    7
    'semantic' | 'grid' | 'grid-no-grow'
    'semantic' //(changes based on other enabled features)
    TODO
    8
    OnChangeFn<ColumnSizingState>
    TanStack Table Column Sizing Docs
    9
    OnChangeFn<ColumnSizingInfoState>
    TanStack Table Column Sizing Docs

    Relevant Column Options

    1
    boolean
    2
    boolean | number
    3
    number
    1000
    4
    number
    40
    5
    number
    180

    Relevant State

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

    Initial Column Sizes

    Column sizes will behave differently depending on which layoutMode you have set.

    See the Column Size Guide for more information on layout modes and how to set initial column sizes properly for you use case.

    Enable Column Resizing Feature

    enableColumnResizing is the boolean table option 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

    Column Growing

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

    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. You can let columns grow to fill in the remaining space by changing the layoutMode back to "grid" or "semantic".

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

    Alternatively, if you only want certain columns to grow to fill the remaining space, you can set the grow column option to true in their respective column definitions.

    const columns = [
    //...
    {
    accessorKey: 'address',
    header: 'Address',
    size: 250,
    grow: true, //allow this column to grow to fill the remaining space
    },
    ];

    This is discussed in more detail in the Column Size Guide.

    Column Resize Direction

    New in V3.1

    If you are displaying your table in a RTL (right-to-left) language, you can set the columnResizeDirection table option to "rtl" to make the column resize handle appear on the left side of the column instead of the right side. This may behave differently depending on which Emotion or MUI theme settings you have enabled.

    If you have already set the proper theme.direction setting in your MUI theme, then this option will already have been set automatically for you, but you can still override it using the columnResizeDirection table option.

    const table = useMaterialReactTable({
    columns,
    data,
    enableColumnResizing: true,
    columnResizeDirection: 'rtl', //instead of the default "ltr" direction
    });
    return (
    <div style={{ direction: 'rtl' }}>
    {' '}
    {/* app-wide style? */}
    <MaterialReactTable table={table} />
    </div>
    );

    Demo

    میسی26
    پریا28
    علی33
    1-3 از 3

    Source Code

    1//Import Material React Table and its Types
    2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
    3
    4//Import Material React Table Translations
    5import { MRT_Localization_FA } from 'material-react-table/locales/fa';
    6
    7//mock data
    8import { data, type Person } from './makeData';
    9
    10const columns: MRT_ColumnDef<Person>[] = [
    11 //column definitions...
    26];
    27
    28const Example = () => {
    29 return (
    30 <MaterialReactTable
    31 columns={columns}
    32 data={data}
    33 defaultColumn={{ size: 250 }}
    34 columnResizeDirection="rtl"
    35 enableColumnFilterModes
    36 enableColumnOrdering
    37 enableColumnResizing
    38 enableEditing
    39 enableColumnPinning
    40 enableRowActions
    41 enableRowSelection
    42 enableSelectAll={false}
    43 initialState={{ showColumnFilters: true, showGlobalFilter: true }}
    44 localization={MRT_Localization_FA}
    45 />
    46 );
    47};
    48
    49//App.tsx or similar
    50import { createTheme, ThemeProvider, useTheme } from '@mui/material';
    51import { faIR } from '@mui/material/locale';
    52
    53const ExampleWithThemeProvider = () => {
    54 const theme = useTheme(); //replace with your theme/createTheme
    55
    56 return (
    57 //Setting Material UI locale as best practice to result in better accessibility
    58 <ThemeProvider theme={createTheme({ ...theme, direction: 'rtl' }, faIR)}>
    59 <div style={{ direction: 'rtl' }}>
    60 <Example />
    61 </div>
    62 </ThemeProvider>
    63 );
    64};
    65
    66export default ExampleWithThemeProvider;
    67

    Enable Resizing on Built-in Display Columns

    As discussed further in the Display Columns Guide, you can customize the options of the built-in columns that get generated under the hood by MRT by enabling certain features.

    Here, we can enable column resizing on the built-in row numbers column by setting the enableResizing column option to true in the displayColumnDefOptions table option.

    const table = useMaterialReactTable({
    columns,
    data,
    displayColumnDefOptions: {
    'mrt-row-numbers': {
    enableResizing: true, //allow the row numbers column to be resized
    size: 40,
    grow: false, //new in v2.8 - do not fill remaining space using this column
    },
    },
    enableRowNumbers: true,
    layoutMode: 'grid', // `grow` only works in the grid* layout modes
    });
    return <MaterialReactTable table={table} />;

    View Extra Storybook Examples