MRT logoMantine React Table

On This Page

    Column Resizing Feature Guide

    Mantine 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
    'onChange' | 'onEnd'
    'onChange'
    MRT Column Resizing Docs
    2
    Partial<MRT_ColumnDef<TData>>
    TanStack Table Core Table Docs
    3
    boolean
    MRT Column Resizing Docs
    4
    'semantic' | 'grid'
    'semantic'
    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

    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 column sizes might not change 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 mantineTableProps.
    const table = useMantineReactTable({
    columns,
    data,
    mantineTableProps: {
    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 reading this blog post by CSS-Tricks.
    If you are using either virtualization features or have the layoutMode set to "grid", another option is to turn off flex grow for both the table head and body cells. You can see this down below at the bottom of this page

    Default Column

    By default, columns will have the following size properties defined:
    const table = useMantineReactTable({
    columns,
    data,
    defaultColumn: { minSize: 40, maxSize: 1000, size: 180 }, //units are in px (these are the default values)
    });
    You can modify the default column widths by setting the defaultColumn table option.
    const table = useMantineReactTable({
    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 table option that enables the column resizing feature.
    const table = useMantineReactTable({
    columns,
    data,
    enableColumnResizing: true,
    });
    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. (Unless layoutMode is set to "grid")

    Column Resize Mode

    The default columnResizeMode is onChange, which means that 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 = useMantineReactTable({
    columns,
    data,
    enableColumnResizing: true,
    columnResizeMode: 'onEnd',
    });
    DylanMurraydmurray@yopmail.comEast DaphneUSA
    RaquelKohlerrkholer33@yopmail.comColumbusUSA
    ErvinReingerereinger@mailinator.comTorontoCanada
    BrittanyMcCulloughbmccullough44@mailinator.comLincolnUSA
    BransonFramibframi@yopmain.comNew YorkUSA
    1-5 of 5
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
    3
    import { data, type Person } from './makeData';
    4
    5
    const Example = () => {
    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
    <MantineReactTable
    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
    48
    />
    49
    );
    50
    };
    51
    52
    export default Example;
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable } from 'mantine-react-table';
    3
    import { data } from './makeData';
    4
    5
    const Example = () => {
    6
    const columns = useMemo(
    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
    <MantineReactTable
    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
    48
    />
    49
    );
    50
    };
    51
    52
    export default Example;

    Disable Column Growing

    If you want to prevent the columns from growing to fill the width of the table, use this flexbox trick when the layoutMode is "grid":
    const table = useMantineReactTable({
    columns,
    data,
    enableColumnResizing: true,
    layoutMode: 'grid',
    mantineTableHeadCellProps: {
    sx: {
    flex: '0 0 auto',
    },
    },
    mantineTableBodyCellProps: {
    sx: {
    flex: '0 0 auto',
    },
    },
    });
    DylanMurraydmurray@yopmail.com
    RaquelKohlerrkholer33@yopmail.com
    ErvinReingerereinger@mailinator.com
    BrittanyMcCulloughbmccullough44@mailinator.com
    BransonFramibframi@yopmain.com
    1-5 of 5
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
    3
    import { data, type Person } from './makeData';
    4
    5
    const Example = () => {
    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
    {
    17
    accessorKey: 'email',
    18
    header: 'Email Address',
    19
    size: 300,
    20
    },
    21
    ],
    22
    [],
    23
    );
    24
    25
    return (
    26
    <MantineReactTable
    27
    columns={columns}
    28
    data={data}
    29
    enableColumnResizing
    30
    layoutMode="grid"
    31
    //Disables the default flex-grow behavior of the table cells
    32
    mantineTableHeadCellProps={{
    33
    sx: {
    34
    flex: '0 0 auto',
    35
    },
    36
    }}
    37
    mantineTableBodyCellProps={{
    38
    sx: {
    39
    flex: '0 0 auto',
    40
    },
    41
    }}
    42
    //
    43
    />
    44
    );
    45
    };
    46
    47
    export default Example;
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable } from 'mantine-react-table';
    3
    import { data } from './makeData';
    4
    5
    const Example = () => {
    6
    const columns = useMemo(
    7
    () => [
    8
    {
    9
    accessorKey: 'firstName',
    10
    header: 'First Name',
    11
    },
    12
    {
    13
    accessorKey: 'lastName',
    14
    header: 'Last Name',
    15
    },
    16
    {
    17
    accessorKey: 'email',
    18
    header: 'Email Address',
    19
    size: 300,
    20
    },
    21
    ],
    22
    [],
    23
    );
    24
    25
    return (
    26
    <MantineReactTable
    27
    columns={columns}
    28
    data={data}
    29
    enableColumnResizing
    30
    layoutMode="grid"
    31
    //Disables the default flex-grow behavior of the table cells
    32
    mantineTableHeadCellProps={{
    33
    sx: {
    34
    flex: '0 0 auto',
    35
    },
    36
    }}
    37
    mantineTableBodyCellProps={{
    38
    sx: {
    39
    flex: '0 0 auto',
    40
    },
    41
    }}
    42
    //
    43
    />
    44
    );
    45
    };
    46
    47
    export default Example;
    View Extra Storybook Examples
    You can help make these docs better! PRs are Welcome
    Using Material-UI instead of Mantine?
    Check out Material React Table