Filtering
All four filtering surfaces on one grid: type in the filter row (click the operator button to switch Contains → Starts with → …), open a header filter and search inside its values, use the global search (matches are highlighted), or click the filter panel at the top to open the Filter Builder for arbitrary and/or trees.
filterRow headerFilter searchPanel filterPanel filterValue
2.000 rows all filter surfaces
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeColumn, OgeGrid } from '@oge-ui/grid';
import type { FilterExpr } from '@oge-ui/core';
@Component({
selector: 'demo-root',
imports: [OgeColumn, OgeGrid],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- filterRow — per-column editors + operator menu
headerFilter — distinct values with a search box
searchPanel — global search + highlighting
filterPanel — filter builder entry point
filterValue — programmatic and/or tree -->
<oge-grid [data]="employees" keyField="id"
[filterRow]="true"
[headerFilter]="true"
[searchPanel]="true"
[filterPanel]="true"
[(filterValue)]="filter">
<oge-column field="firstName" caption="First Name" />
<oge-column field="salary" caption="Salary" dataType="number" />
</oge-grid>
`,
})
export class Demo {
readonly employees = [
{ id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
{ id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
{ id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
{ id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
{ id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
];
// filterValue is a serializable and/or expression tree
protected readonly filter = signal<FilterExpr | null>({
type: 'and',
operands: [
{ type: 'binary', field: 'department', op: 'eq', value: 'Engineering' },
{ type: 'binary', field: 'salary', op: 'ge', value: 60000 },
],
});
}Excel-style filter menu
headerFilter.mode picks what the funnel opens: 'list' (the default value checklist with search and select-all), 'conditions' (two operator + value conditions joined by And / Or) or 'both'. Date columns list their values as a collapsible year → month → day tree. The conditions are stored as a filter expression, so they persist with stateKey.
headerFilter.mode date tree
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeColumn, OgeGrid } from '@oge-ui/grid';
@Component({
selector: 'demo-root',
imports: [OgeColumn, OgeGrid],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- mode 'both': two conditions (And / Or) above the value list;
a date column lists its values as a year → month → day tree -->
<oge-grid [data]="employees" keyField="id"
[headerFilter]="{ mode: 'both' }">
<oge-column field="firstName" caption="First Name" />
<oge-column field="salary" caption="Salary" dataType="number" />
<oge-column field="hireDate" caption="Hired" dataType="date" />
</oge-grid>
`,
})
export class Demo {
readonly employees = [
{ id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
{ id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
{ id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
{ id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
{ id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
];
}Notes
- Open the Hire Date header filter: date values are grouped into a year tree — the year checkbox toggles all its dates at once and the search box matches years or single dates.
- Every surface produces the same serializable
FilterExprtree — combined with AND and sent to your backend unchanged in remote mode. - The operator button in each filter cell offers dataType-appropriate operators; Reset returns to the column default.
[(filterValue)]is two-way: set it programmatically, read what the builder produced, persist it — it also participates instateKey.- Search highlighting only touches default cells; custom
*ogeCellTemplatecontent is never rewritten.