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 data grid vertically.
You can pin rows at the top or bottom of the Data 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.
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.