Skip to content
Edit this page

Data grid - Row pinning

Pin rows to keep them visible at all times.

Pinned (or frozen, locked, or floating) rows are those visible at all times while the user scrolls the grid vertically.

You can pin rows at the top or bottom of the grid by passing pinned rows data through the pinnedRows prop:

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

<DataGridPro pinnedRows={pinnedRows} />;

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.

<DataGridPro
  columns={columns}
  rows={rows}
  pinnedRows={pinnedRows}
  experimentalFeatures={{ rowPinning: true }}
/>

Controlling pinned rows

You can control which rows are pinned by changing pinnedRows.

In the demo below we use actions column type to add buttons to pin a row either at the top or bottom and change pinnedRows prop dynamically.

Usage with other features

Pinned rows are not affected by sorting and filtering.

Pagination does not impact pinned rows as well - they stay pinned regardless the page number or page size.

API