MRT logoMaterial React Table

Column Pinning Example

Material React Table easily has an easy to enable column pinning feature. Columns can be pinned to the left or right of the table, and the will be frozen in place while the rest of the table scrolls horizontally. See the Column Pinning Feature Guide for more information.

More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
Actions
State
ID
First Name
Middle Name
Last Name
Address
Country
City
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 { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { data, type Person } from './makeData';
4import { MenuItem } from '@mui/material';
5

6const Example = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    () => [
9      {
10        accessorKey: 'id',
11        enableColumnPinning: false, //disable column pinning for this column
12        header: 'ID',
13        size: 50,
14      },
15      {
16        accessorKey: 'firstName',
17        header: 'First Name',
18      },
19      {
20        accessorKey: 'middleName',
21        header: 'Middle Name',
22      },
23      {
24        accessorKey: 'lastName',
25        header: 'Last Name',
26      },
27      {
28        accessorKey: 'address',
29        header: 'Address',
30        size: 300,
31      },
32      {
33        accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
34        header: 'City',
35      },
36      {
37        accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
38        header: 'State',
39      },
40      {
41        accessorKey: 'country',
42        header: 'Country',
43      },
44    ],
45    [],
46  );
47

48  return (
49    <MaterialReactTable
50      columns={columns}
51      data={data}
52      enableColumnPinning
53      enableRowActions
54      renderRowActionMenuItems={() => [
55        <MenuItem key="action">Action</MenuItem>,
56      ]}
57      initialState={{
58        columnPinning: { left: ['mrt-row-actions', 'state'], right: ['city'] },
59      }}
60    />
61  );
62};
63

64export default Example;
65

View Extra Storybook Examples