Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

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 pinnedTopRowData or pinnedBottomRowData in the same way as you would set normal data into rowData. After the grid is created, you can update the pinned rows by calling api.setPinnedTopRowData(rows) and setPinnedBottomRowData(rows).

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.
setPinnedTopRowData = (rows: any[]) => void;
Set the bottom pinned rows.
setPinnedBottomRowData = (rows: any[]) => void;

Cell Editing

Cell editing can take place as normal on pinned rows.

Cell Rendering

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.
cellRendererSelector = (
    params: ICellRendererParams
) => CellRendererSelectorResult | undefined;

interface ICellRendererParams {
  // Value to be rendered. 
  value: any;
  // Formatted value to be rendered. 
  valueFormatted: any;
  // True if this is a full width row. 
  fullWidth?: boolean;
  // Pinned state of the cell. 
  pinned?: string | null;
  // The row's data. 
  data: any;
  // The row node. 
  node: RowNode;
  // The current index of the row (this changes after filter and sort). 
  rowIndex: number;
  // The cell's column definition. 
  colDef?: ColDef;
  // The cell's column. 
  column?: Column;
  api: GridApi;
  columnApi: ColumnApi;
  // The context as provided on `gridOptions.context`. 
  context: any;
  // The grid's cell, a DOM div element. 
  eGridCell: HTMLElement;
  // The parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection. 
  eParentOfValue: HTMLElement;
  // Convenience function to get most recent up to date value. 
  getValue?: () => any;
  // Convenience function to set the value. 
  setValue?: (value: any) => void;
  // Convenience function to format a value using the column's formatter. 
  formatValue?: (value: any) => any;
  // Convenience function to refresh the cell. 
  refreshCell?: () => void;
  // registerRowDragger:
  // @param rowDraggerElement The HTMLElement to be used as Row Dragger
  // @param dragStartPixels The amount of pixels required to start the drag (Default: 4)
  // @param value The value to be displayed while dragging. Note: Only relevant with Full Width Rows.
  // @param suppressVisibilityChange Set to `true` to prevent the Grid from hiding the Row Dragger when it is disabled.
  registerRowDragger: (rowDraggerElement: HTMLElement, dragStartPixels?: number, value?: string, suppressVisibilityChange?: boolean) => void;

interface CellRendererSelectorResult {
  // Equivalent of setting `colDef.cellRenderer` 
  component?: { new (): ICellRendererComp; } | ICellRendererFunc | string;
  // Equivalent of setting `colDef.cellRendererFramework` 
  frameworkComponent?: any;
  // Equivalent of setting `colDef.cellRendererParams` 
  params?: any;

interface ICellRendererFunc {
    (params: ICellRendererParams) : HTMLElement | string


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).

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.