Column Pinning Material React Table Example

Material React Table

Column Pinning Example

Material React Table has an easy-to-enable column pinning feature. Columns can be pinned to the left or right of the table, and the column 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 Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

State	ID	First Name	Middle Name	Last Name	Address	Country	City
Kentucky	1	Dylan	Sprouse	Murray	261 Erdman Ford	United States	East Daphne
Ohio	2	Raquel	Hakeem	Kohler	769 Dominic Grove	United States	Columbus
West Virginia	3	Ervin	Kris	Reinger	566 Brakus Inlet	United States	South Linda
Nebraska	4	Brittany	Kathryn	McCullough	722 Emie Stream	United States	Lincoln
South Carolina	5	Branson	John	Frami	32188 Larkin Turnpike	United States	Charleston
British Columbia	6	Brandon	Joe	Kutch	5660 Kuhn Village	Canada	Vancouver

Rows per page

1-6 of 6

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

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...
20      {
21        accessorKey: 'firstName',
22        header: 'First Name',
23      },
24      {
25        accessorKey: 'middleName',
26        header: 'Middle Name',
27      },
28      {
29        accessorKey: 'lastName',
30        header: 'Last Name',
31      },
32      {
33        accessorKey: 'address',
34        header: 'Address',
35        size: 300,
36      },
37      
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