Vue Data GridRow Pinning

Pinned rows appear either above or below the normal rows of a table. This feature in other grids is also known as Frozen Rows or Floating Rows.

Set Pinned Rows using grid attributes pinnedTopRowData and pinnedBottomRowData.

pinnedTopRowData
any[]
Data to be displayed as pinned top rows in the grid.
pinnedBottomRowData
any[]
Data to be displayed as pinned bottom rows in the grid.

Cell Components

Cell Components are shared between Pinned and non-Pinned rows. To have different Cell Components for Pinned vs non-Pinned, use a cellRendererSelector.

Non Supported Items

Pinned rows are not part of the main row model. For this reason, the following is not possible:

  • Sorting: Pinned rows cannot be sorted.
  • Filtering: Pinned rows are not filtered.
  • Row Grouping: Pinned rows cannot be grouped.
  • Row Selection: Pinned rows cannot be selected.