Filtering (Angular)

Add column filtering to the Angular grid using built-in operators, custom filter components, and live updates as users refine their search criteria today.

This Angular example is being written. See the React filtering example for the conceptual model — the filterable column flag and filter operators behave identically across bindings.

filterable-grid.component.ts

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

@Component({
  selector: "app-filterable-grid",
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
      />
    </div>
  `,
})
export class FilterableGridComponent {
  columns: ColumnDefinition[] = [
    { field: "name", cellDataType: "text", width: 150, filterable: true },
    { field: "salary", cellDataType: "number", width: 120, filterable: true },
  ];

  data = [/* your data */];
}