MRT logoMaterial React Table

    Column Pinning Feature Guide

    Column Pinning is a cool feature that allows users to 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 Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean

    No Description Provided... Yet...

    2
    OnChangeFn<ColumnPinningState>
    TanStack Table Column Pinning Docs

    If provided, this function will be called with an updaterFn when state.columnPinning changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    boolean

    No Description Provided... Yet...

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1
    { left: Array<string>, right: Array<string> }
    { left: [], right: [] }
    TanStack Table Column Pinning Docs

    No Description Provided... Yet...

    Enable Column Pinning

    Column pinning can simply be enabled by setting the enablePinning prop to true.

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

    Pin (Freeze) Columns By Default

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

    <MaterialReactTable
    data={data}
    columns={columns}
    initialState={{ pinning: { left: ['email'] } }} //pin email column to left by default
    />

    Column Pinning Example


    Demo

    Open Code SandboxOpen on GitHub
    State
    ID
    First Name
    Middle Name
    Last Name
    Address
    City
    Kentucky1DylanSprouseMurray261 Erdman FordEast Daphne
    Ohio2RaquelHakeemKohler769 Dominic GroveColumbus
    West Virginia3ErvinKrisReinger566 Brakus InletSouth Linda
    Nebraska4BrittanyKathrynMcCullough722 Emie StreamLincoln
    South Carolina5BransonJohnFrami32188 Larkin TurnpikeCharleston

    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: '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 <MaterialReactTable
    46 columns={columns}
    47 data={data}
    48 enablePinning
    49 initialState={{ columnPinning: { left: ['state'], right: ['city'] } }}
    50 />
    51 );
    52};
    53
    54export default Example;
    55