Pinning Rows
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.
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.html<GridColumn columnType="pin" />
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"
:default-pinned-top-rows="[products[0], products[1]]"
:default-pinned-bottom-rows="[products[products.length - 1]]"
>
<GridColumn 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 } }"
>