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

	#	Type	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 Sandbox Open on GitHub

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

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