Skip to content

Data grid - Column pinning

Pin columns to keep them visible at all time.

Pinned (or frozen, locked, or sticky) columns are columns that are visible at all time while the user scrolls the grid horizontally. They can be pinned either to the left or right side and cannot be reordered.

To pin a column, there are a few ways:

  • Using the initialState prop
  • Controlling the pinnedColumns and onPinnedColumnsChange props
  • Dedicated buttons in the column menu
  • Accessing the imperative API

To set pinned columns via initialState, pass an object with the following shape to this prop:

interface GridPinnedColumns {
  left?: string[]; // Optional field names to pin to the left
  right?: string[]; // Optional field names to pin to the right
}

The following demos illustrates how this approach works:

Name
Email
Age
Date Created
Last Login
Donald Ford
Harry Silva
Sally Torres
Esther Hammond
Rose Gomez
Joel Butler
Chase Smith
Emilie Reyes
Nettie Hardy
uw@zo.mt
25
4/23/2024
1/5/2025, 5:58:17 PM
nipowja@mozziow.uk
36
4/16/2024
1/5/2025, 8:48:54 PM
esho@hoteced.eu
19
7/7/2024
1/5/2025, 7:40:38 PM
toc@pol.cv
28
4/12/2024
1/5/2025, 7:30:42 PM
bu@zozso.ie
23
5/29/2024
1/6/2025, 1:37:08 AM
saefle@maw.aq
27
7/30/2024
1/6/2025, 3:46:22 AM
dog@todo.bw
18
4/8/2024
1/6/2025, 1:52:04 AM
uloiri@zicecew.kz
31
10/7/2024
1/6/2025, 3:06:26 AM
polab@robocka.ug
24
6/27/2024
1/5/2025, 10:55:48 PM
Total Rows: 10
Press Enter to start editing

Controlling the pinned columns

While the initialState prop only works for setting pinned columns during the initialization, the pinnedColumns prop allows you to modify which columns are pinned at any time. The value passed to it follows the same shape from the previous approach. Use it together with onPinnedColumnsChange to know when a column is pinned or unpinned.

Name
Email
Age
Date Created
Last Login
Glen Mitchell
Kate Page
Nettie Myers
Janie Thornton
Grace Jensen
ezi@vi.nz
25
10/23/2024
1/5/2025, 11:43:09 AM
mi@vucim.gf
36
3/14/2024
1/5/2025, 8:36:13 PM
fohdetfa@lupif.tz
19
10/22/2024
1/6/2025, 6:12:35 AM
zukhulap@majko.aq
28
1/31/2024
1/5/2025, 6:29:39 PM
jano@abe.gt
23
6/7/2024
1/5/2025, 3:02:48 PM
Total Rows: 5
Press Enter to start editing

Blocking column unpinning

It may be desirable to not allow a column to be unpinned. The only thing required to achieve that is to hide the buttons added to the column menu. This can be done in two ways:

  1. Per column, by setting pinnable to false in each GridColDef:

    <DataGrid columns={[{ field: 'id', pinnable: false }]} /> // Default is `true`.
    
  2. By providing a custom menu, as demonstrated below:

Name
Email
Age
Date Created
Last Login
Raymond Hunt
Madge Nunez
Terry Hubbard
Herman Martinez
Sophia Hamilton
fova@letek.ag
25
8/25/2024
1/5/2025, 1:38:42 PM
me@ta.lr
36
12/10/2024
1/5/2025, 5:44:08 PM
sow@dolak.gh
19
10/26/2024
1/5/2025, 9:59:19 PM
fiptu@izu.gp
28
3/26/2024
1/5/2025, 2:22:50 PM
bacdempu@efi.ge
23
3/11/2024
1/6/2025, 12:10:51 AM
Total Rows: 5
Press Enter to start editing

Pinning the checkbox selection column

To pin the checkbox column added when using checkboxSelection, add GRID_CHECKBOX_SELECTION_COL_DEF.field to the list of pinned columns.

Name
Email
Age
Date Created
Last Login
Allie Russell
mo@ibcit.jm
25
10/14/2024
1/5/2025, 2:20:24 PM
Connor Boyd
zaf@fo.sn
36
3/23/2024
1/6/2025, 9:24:22 AM
Ethel Ramirez
hadhale@gije.bm
19
10/29/2024
1/6/2025, 6:30:14 AM
Jesse Klein
toravig@zebhemah.tn
28
7/6/2024
1/5/2025, 10:57:57 PM
Leo Baldwin
ziuv@navec.sd
23
8/1/2024
1/6/2025, 5:59:17 AM
Total Rows: 5
Press Enter to start editing

Usage with dynamic row height

You can have both pinned columns and dynamic row height enabled at the same time. However, if the rows change their content after the initial calculation, you may need to trigger a manual recalculation to avoid incorrect measurements. You can do this by calling apiRef.current.resetRowHeights() every time that the content changes.

The demo below contains an example of both features enabled:

Name
Email
Age
Date Created
Last Login
Actions
Isabelle Reid
Miguel Padilla
Lida Edwards
Max Burke
Louise Fitzgerald
Maud Reyes
Catherine Padilla
Seth Lawson
Maria Peters
zo@hoj.np
25
2/14/2024
1/6/2025, 6:25:40 AM
mif@conoh.ie
36
6/26/2024
1/5/2025, 11:58:50 PM
noug@so.be
19
1/24/2024
1/6/2025, 1:28:01 AM
gigliepe@pucfic.ai
28
4/30/2024
1/6/2025, 3:10:38 AM
ujojejgik@haltivsiv.rw
23
10/28/2024
1/6/2025, 12:28:31 AM
zezjujen@bu.sr
27
2/9/2024
1/6/2025, 8:59:02 AM
laf@uv.ma
18
4/28/2024
1/5/2025, 9:57:51 PM
cu@wawivobu.li
31
4/14/2024
1/6/2025, 9:29:50 AM
sadlejiw@cawol.sg
24
10/13/2024
1/5/2025, 7:25:29 PM
Total Rows: 10
Press Enter to start editing

apiRef

Signature:
getPinnedColumns: () => GridPinnedColumns
Signature:
isColumnPinned: (field: string) => GridPinnedPosition | false
Signature:
pinColumn: (field: string, side: GridPinnedPosition) => void
Signature:
setPinnedColumns: (pinnedColumns: GridPinnedColumns) => void
Signature:
unpinColumn: (field: string) => void