Vue Data Grid: Row 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.
To put pinned rows into your grid, set
in the same way as you would set normal data into
After the grid is created, you can update the pinned rows by calling
Data to be displayed as pinned top rows in the grid.
Data to be displayed as pinned bottom rows in the grid.
Set the top pinned rows. Call with no rows / undefined to clear top pinned rows.
Set the bottom pinned rows. Call with no rows / undefined to clear bottom pinned rows.
Cell editing can take place as normal on pinned rows.
Cell rendering can take place as normal on pinned rows. If you want to use a different
Cell Renderer for pinned rows vs normal rows, use
colDef.cellRendererSelector to specify
different Cell Renderer's for different rows.
Callback to select which cell renderer to be used for a given row within the same column.
The example below shows pinned rows. Select the number of rows you want to pin at the top and the bottom using the selection above the grid.
In this example we're using Components to render custom pinned row values for Athlete and Age (colour blue and italics respectively).
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.