Highlighting

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" : "");
}