Highlighting (Angular)

Highlight rows, columns, and individual cells inside the Angular grid using conditional rules, hover styling, and custom CSS class overrides per cell.

This example demonstrates the highlighting API using computeRowClasses, computeColumnClasses, and computeCellClasses to create dynamic hover effects.

Interactive Demo

Use the toggle buttons to switch between different highlighting modes:

Angular-specific code samples below. The callback signatures are identical across framework bindings.

Row Highlighting

highlighted-grid.component.ts

import { Component } from "@angular/core";
import { GridComponent, type ColumnDefinition } from "@gp-grid/angular";

@Component({
  selector: "app-highlighted-grid",
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
        [computeRowClasses]="computeRowClasses"
      />
    </div>
  `,
})
export class HighlightedGridComponent {
  columns: ColumnDefinition[] = [/* ... */];
  data = [/* ... */];

  computeRowClasses = ({ hoveredRowIndex, rowIndex }: {
    hoveredRowIndex: number | null;
    rowIndex: number;
  }) => (rowIndex === hoveredRowIndex ? "row-highlight" : "");
}