Pinning RowsPremium
The Data Grid provides built-in row pinning that lets you lock rows at the top or bottom of the scrollable area. Pinned rows stay visible while the user scrolls through the body data and are immune to filtering and pagination.
Start Free Trial
Getting Started
To enable row pinning, set the pinnable prop to true. The Grid will manage the pinning state internally.
<Grid pinnable={true}>To allow users to pin rows, provide at least one of the following UI entry points:
-
A Grid column with the pin
columnType, which renders a built-in pin dropdown for every row.jsx<Column columnType="pin" /> -
The built-in
contextMenu, which exposes Pin to Top, Pin to Bottom, and Unpin actions when right-clicking a row.jsx<Grid pinnable={true} contextMenu={true}>
You can use either option or both together.
To pre-populate rows that are pinned on initial render, use defaultPinnedTopRows and defaultPinnedBottomRows.
<Grid
pinnable={true}
defaultPinnedTopRows={[products[0], products[1]]}
defaultPinnedBottomRows={[products[products.length - 1]]}
>
<Column columnType="pin" />
...
</Grid>The following example demonstrates row pinning in action. Click the pin icon in any row to open the dropdown and choose where to pin the row.
Controlled Mode
When you need full control over which rows are pinned, provide the pinnedTopRows and/or pinnedBottomRows arrays and handle the onRowPinChange event to update them. The GridRowPinChangeEvent provides the updated arrays and the affected data item.
Custom Pinned Row Rendering
You can customize how pinned rows are rendered using the rows.pinnedData setting or the cells.pin setting for the pin column cells.
<Grid
pinnable={true}
rows={{ pinnedData: CustomPinnedRow }}
cells={{ pin: { data: CustomPinCell } }}
>