Skip to content
+

Data Grid - Row pinning

Implement pinning to keep rows in the Data Grid visible at all times.

Pinned rows (also known as sticky, frozen, and locked) are visible at all times while scrolling the Data Grid vertically. With the Data Grid Pro, you can pin rows to the top or bottom of the grid.

Implementing row pinning

Use the pinnedRows prop to define the rows to be pinned to the top or bottom of the Data Grid, as shown below:

const pinnedRows: GridPinnedRowsProp = {
  top: [{ id: 0, brand: 'Nike' }],
  bottom: [
    { id: 1, brand: 'Adidas' },
    { id: 2, brand: 'Puma' },
  ],
};

<DataGridPro pinnedRows={pinnedRows} />;

Pinned row data formatting

The data format for pinned rows is the same as for the rows prop (see Feeding data).

Pinned rows data should also meet Row identifier requirements.

Press Enter to start editing

Controlling pinned rows

You can control which rows are pinned by making dynamic changes to pinnedRows.

The demo below uses the actions column type to provide buttons that let the user pin a row to the top or bottom of the Grid.

Usage with other features

Pinned rows are not affected by sorting, filtering, or pagination—they remain pinned regardless of how these features are applied.

Pinned rows do not support the following features:

  • selection
  • row grouping
  • tree data
  • row reordering
  • master-detail row panels

When there are pinned rows present in a Grid, you can still use these features with rows that aren't pinned.

API