MRT logoMantine React Table

On This Page

    Column Pinning Feature Guide

    Column pinning is a cool feature that lets users pin (freeze) columns to the left or right of the table. Pinned columns will not scroll horizontally with the rest of the columns so that they always stay visible to the user.

    Relevant Table Options

    1
    boolean
    2
    OnChangeFn<ColumnPinningState>
    TanStack Table Column Pinning Docs

    Relevant Column Options

    1
    boolean

    Relevant State

    1
    { left: Array<string>, right: Array<string> }
    { left: [], right: [] }
    TanStack Table Column Pinning Docs

    Enable Column Pinning

    Column pinning can simply be enabled by setting the enablePinning table option to true.
    const table = useMantineReactTable({
    data,
    columns,
    enablePinning: true,
    });

    Pin (Freeze) Columns By Default

    Columns can start out pinned in your table by setting the columnPinning states in either initialState or state.
    const table = useMantineReactTable({
    data,
    columns,
    enablePinning: true,
    initialState: {
    columnPinning: {
    left: ['email'], //pin email column to left by default
    right: ['mrt-row-actions'], //pin built-in row actions display column to right by default
    },
    },
    });

    Column Pinning Example

    Kentucky1DylanSprouseMurray261 Erdman FordEast Daphne
    Ohio2RaquelHakeemKohler769 Dominic GroveColumbus
    West Virginia3ErvinKrisReinger566 Brakus InletSouth Linda
    Nebraska4BrittanyKathrynMcCullough722 Emie StreamLincoln
    South Carolina5BransonJohnFrami32188 Larkin TurnpikeCharleston
    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: 'id',
    10
    enablePinning: false, //disable column pinning for this column
    11
    header: 'ID',
    12
    size: 50,
    13
    },
    14
    {
    15
    accessorKey: 'firstName',
    16
    header: 'First Name',
    17
    },
    18
    {
    19
    accessorKey: 'middleName',
    20
    header: 'Middle Name',
    21
    },
    22
    {
    23
    accessorKey: 'lastName',
    24
    header: 'Last Name',
    25
    },
    26
    {
    27
    accessorKey: 'address',
    28
    header: 'Address',
    29
    size: 300,
    30
    },
    31
    {
    32
    accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
    33
    header: 'City',
    34
    },
    35
    36
    {
    37
    accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
    38
    header: 'State',
    39
    },
    40
    ],
    41
    [],
    42
    );
    43
    44
    return (
    45
    <MantineReactTable
    46
    columns={columns}
    47
    data={data}
    48
    enablePinning
    49
    initialState={{ columnPinning: { left: ['state'], right: ['city'] } }}
    50
    />
    51
    );
    52
    };
    53
    54
    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: 'id',
    10
    enablePinning: false, //disable column pinning for this column
    11
    header: 'ID',
    12
    size: 50,
    13
    },
    14
    {
    15
    accessorKey: 'firstName',
    16
    header: 'First Name',
    17
    },
    18
    {
    19
    accessorKey: 'middleName',
    20
    header: 'Middle Name',
    21
    },
    22
    {
    23
    accessorKey: 'lastName',
    24
    header: 'Last Name',
    25
    },
    26
    {
    27
    accessorKey: 'address',
    28
    header: 'Address',
    29
    size: 300,
    30
    },
    31
    {
    32
    accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
    33
    header: 'City',
    34
    },
    35
    36
    {
    37
    accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
    38
    header: 'State',
    39
    },
    40
    ],
    41
    [],
    42
    );
    43
    44
    return (
    45
    <MantineReactTable
    46
    columns={columns}
    47
    data={data}
    48
    enablePinning
    49
    initialState={{ columnPinning: { left: ['state'], right: ['city'] } }}
    50
    />
    51
    );
    52
    };
    53
    54
    export default Example;
    You can help make these docs better! PRs are Welcome
    Using Material-UI instead of Mantine?
    Check out Material React Table