MRT logoMaterial React Table

Legacy V2 Docs
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 enableColumnPinning table option to true.

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

    Pin (Freeze) Columns By Default

    Columns can start out pinned in your table by setting the columnPinning states in initialState or state.

    const table = useMaterialReactTable({
    data,
    columns,
    enableColumnPinning: true,
    initialState: { columnPinning: { left: ['email'] } }, //pin email column to left by default
    });
    return <MaterialReactTable table={table} />;

    Apply Absolute Column Widths

    You might consider using the layoutMode: 'grid-no-grow' table option to give all columns an exact width if you don't want the columns collapsing a little while scrolling. Some people like this subtle behavior, but others do not.

    const table = useMaterialReactTable({
    data,
    columns,
    enableColumnPinning: true,
    layoutMode: 'grid-no-grow',
    });
    return <MaterialReactTable table={table} />;

    Column Pinning Example

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    Kentucky1DylanSprouseMurray261 Erdman FordUnited StatesEast Daphne
    Ohio2RaquelHakeemKohler769 Dominic GroveUnited StatesColumbus
    West Virginia3ErvinKrisReinger566 Brakus InletUnited StatesSouth Linda
    Nebraska4BrittanyKathrynMcCullough722 Emie StreamUnited StatesLincoln
    South Carolina5BransonJohnFrami32188 Larkin TurnpikeUnited StatesCharleston
    British Columbia6BrandonJoeKutch5660 Kuhn VillageCanadaVancouver
    1-6 of 6

    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';
    8import { MenuItem } from '@mui/material';
    9
    10const Example = () => {
    11 const columns = useMemo<MRT_ColumnDef<Person>[]>(
    12 () => [
    13 {
    14 accessorKey: 'id',
    15 enableColumnPinning: false, //disable column pinning for this column
    16 header: 'ID',
    17 size: 50,
    18 },
    19 //column definitions...
    38 {
    39 accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
    40 header: 'City',
    41 },
    42 {
    43 accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
    44 header: 'State',
    45 },
    46 {
    47 accessorKey: 'country',
    48 header: 'Country',
    49 },
    50 ],
    51 [],
    52 );
    53
    54 const table = useMaterialReactTable({
    55 columns,
    56 data,
    57 enableColumnPinning: true,
    58 enableRowActions: true,
    59 layoutMode: 'grid-no-grow', //constant column widths
    60 renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
    61 initialState: {
    62 columnPinning: { left: ['mrt-row-actions', 'state'], right: ['city'] },
    63 },
    64 });
    65
    66 return <MaterialReactTable table={table} />;
    67};
    68
    69export default Example;
    70

    View Extra Storybook Examples