DataGrid Rows

Control Angular DataGrid row behavior including selection, details, sticky rows, row reordering, and highlighting.

Rows

Overview of selection, sticky rows, row detail, drag reorder, and targeted highlighting APIs.

Row APIs covered

selectionMode, selectionBehavior, stickyRows, rowReorderable, rowClass, rowStyle, highlightedIndex, highlightRowKey, highlightColKey, and ngbRowDetail.

Row features basics

Integration steps

Use selectionMode with selectionBehavior when rows should be selectable by click, checkbox, or both.
Enable [stickyRows] to let users pin rows during review; customize badge output with showStickyRowBadge and stickyRowBadgeField.
Set [rowReorderable]="true" and listen to (rowReorder) when order changes need to be persisted.
Use rowClass / rowStyle for row-level emphasis and highlightedIndex with highlightRowKey / highlightColKey for field-level review states.
Project ng-template ngbRowDetail when a row needs expandable operational context below the main cells.

Composite — row features in ngb-datagrid

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

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="rows"
      [selectionMode]="'multiple'"
      [selectionBehavior]="'both'"
      [stickyRows]="true"
      [rowReorderable]="true"
      [highlightedIndex]="[{ row: 101, columnKey: 'status' }]"
      [highlightRowKey]="'id'"
      [highlightColKey]="'field'"
      (rowReorder)="rows = $event.data"
    ></ngb-datagrid>
  `,
})
export class OrderRowFeaturesDemo {
  readonly columns: ColumnDef<OrderRow>[] = [
    { field: 'orderNumber', header: 'Order #', width: 180 },
    { field: 'customerName', header: 'Customer', width: 220 },
    { field: 'status', header: 'Status', width: 160, type: 'select', options: this.statusOptions },
  ];
}

Standalone highlight and reorder helpers

      // Row review / highlighting helpers
rowClass = (row: OrderRow) => ({
  'orders-row-review': row.status === 'Pending',
  'orders-row-flagged': row.priority === 'High',
});

highlightedIndex = [
  { row: 101, columnKey: 'status' },
  { row: 108, columnKey: 'deliveryDate' },
];

Combine row selection, sticky rows, row detail, reordering, and targeted highlights from one datagrid instance.

Sticky rows stay pinned during scrollSelected rows use checkbox or row interactionHighlighted rows/cells call out review states