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 Pinned 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 api.setPinnedTopRowData(rows) and setPinnedBottomRowData(rows)
Cell editing can take place as normal on pinned rows.
Cell rendering can take place as normal on pinned rows. There is an additional
colDef.pinnedRowCellRenderer property you can use to give pinned row cell a
different cellRenderer to the other cells. If both cellRenderer and pinnedRowCellRenderer
are provided, pinned rows will use pinnedRowCellRenderer over cellRenderer.
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 (color blue and italics respectively).