DataGrid Sticky Rows

Pin important DataGrid rows while users scroll through larger result sets.

Rows

The first row stays visible when scrolling

Sticky Row Feature

The first row stays visible when scrolling

Sticky rows

Sticky rows keep important records pinned inside the scrollable grid body so users can compare other rows against a reference order, account, or exception.

How to use it

Enable [stickyRows] when users need one or more important rows to remain visible while the grid body scrolls.
Use the grid API to pin or unpin rows from user actions, or provide already-pinned row state from application logic.
Set showStickyRowBadge and stickyRowBadgeField when the sticky row should display a compact identifier badge.
Provide stickyRowHeightPx when row height is fixed so stacked sticky rows can calculate their top offsets correctly.

Grid example - component setup and template binding

      import { Component, ViewChild } from '@angular/core';
import { Datagrid, ColumnDef } from '@angular-bootstrap/ngbootstrap';

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      #grid
      [columns]="columns"
      [data]="orders"
      [stickyRows]="true"
      [showStickyRowBadge]="true"
      [stickyRowBadgeField]="'orderNumber'"
      [stickyRowHeightPx]="64"
      [scrollable]="true"
    ></ngb-datagrid>
  `,
})
export class StickyRowsDemo {
  @ViewChild('grid') grid?: Datagrid<OrderRow>;

  columns: ColumnDef<OrderRow>[] = [
    { field: 'orderNumber', header: 'Order #', width: 180 },
    { field: 'customerName', header: 'Customer', width: 220 },
    { field: 'status', header: 'Status', width: 160 },
  ];

  pinFirstRow(): void {
    this.grid?.toggleStickyRow(0);
  }
}

API notes - practical integration details

      // Typical sticky-row workflow
// 1. Render the grid with [stickyRows]="true".
// 2. Pin rows from a toolbar/action using the grid instance.
// 3. Keep row height stable with stickyRowHeightPx when multiple rows can be sticky.

grid.toggleStickyRow(rowIndex);

API Information

Property	Type	Default	Description
`stickyRows`	`boolean`	`-`	Enables the grid sticky-row behavior.
`showStickyRowBadge`	`boolean`	`-`	Shows a compact badge inside sticky rows so pinned records remain identifiable.
`stickyRowBadgeField`	`string`	`-`	Reads the badge value from the configured row field.
`stickyRowHeightPx`	`number`	`-`	Provides a fixed height for calculating stacked sticky row offsets.
`toggleStickyRow(index)`	`Grid method`	`-`	Pins or unpins a row by its visible row index.

1 sticky row pinned for scroll validation

Sticky Row (first row)