DataGrid Row & Cell Highlighting

Highlight DataGrid rows and cells from application state for alerts, approvals, and operational review.

Rows

Operations review queue with escalated rows and targeted cell highlights.

Row and cell highlighting

Row and cell highlighting separates broad row state from precise field-level issues. Use row classes for business status and cell highlights for the exact values that need action.

How to use it

Use rowClass or rowStyle for business-driven row emphasis such as review queues, warnings, or SLA risk.
Use highlightedIndex for targeted field-level highlights when a specific row and column need attention.
Set highlightRowKey to a stable row identifier and highlightColKey to a stable column identifier.
Keep highlight styling in application CSS so the same grid API can support different review workflows.

Grid example - component setup and template binding

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

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="orders"
      [rowClass]="rowClass"
      [highlightedIndex]="highlightedIndex"
      [highlightRowKey]="'id'"
      [highlightColKey]="'field'"
    ></ngb-datagrid>
  `,
})
export class RowHighlightDemo {
  columns: ColumnDef<OrderRow>[] = [
    { field: 'orderNumber', header: 'Order #', width: 150 },
    { field: 'status', header: 'Status', width: 160 },
    { field: 'priority', header: 'Priority', width: 140 },
  ];

  rowClass = (row: OrderRow) => ({
    'orders-row-review': row.status === 'Pending',
    'orders-row-attention': row.priority === 'High',
  });

  highlightedIndex = [
    { row: 3 },
    { row: 3, columnKey: 'status' },
    { row: 8, columnKey: 'priority' },
  ];
}

API notes - practical integration details

      /* App CSS */
.orders-row-review td {
  background: rgba(var(--bs-primary-rgb), 0.16);
}

.orders-row-attention td {
  background: rgba(var(--bs-warning-rgb), 0.28);
}

.ngb-grid td.cell-highlight {
  background: rgba(127, 7, 67, 0.18);
  box-shadow: inset 0 0 0 2px #7f0743;
}

API Information

Property	Type	Default	Description
`rowClass`	`string \| string[] \| Record \| function`	`-`	Applies application-defined classes to rows based on row data.
`rowStyle`	`Record \| function`	`-`	Applies inline row styles when a style object is more appropriate than a CSS class.
`highlightedIndex`	`Array<{ row: unknown; columnKey?: unknown }>`	`-`	Declares row-level and cell-level highlights by row key and optional column key.
`highlightRowKey`	`string \| ((row, rowIndex) => unknown)`	`-`	Maps each row to the key used by highlightedIndex.row.
`highlightColKey`	`string \| ((column, columnIndex) => unknown)`	`-`	Maps each column to the key used by highlightedIndex.columnKey.
`cell-highlight`	`CSS class`	`-`	Class applied by the grid to highlighted cells for application styling.

4 review highlights across 12 operational orders

Review rows need supervisor approvalAttention rows are close to SLA breachOutlined cells identify the exact field to resolve