Filtering & Search
Filtering runs client-side over the loaded rows and always keeps the ancestor chain of a match visible — a filtered tree stays a tree. filterMode switches between showing just the matched paths and whole matched branches.
filterRow searchPanel filterMode
ancestors preserved fullBranch
filterMode:
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeColumn, OgeTreeList } from '@oge-ui/tree-list';
@Component({
selector: 'demo-root',
imports: [OgeColumn, OgeTreeList],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<oge-tree-list
[data]="org"
keyExpr="id"
parentIdExpr="parentId"
[autoExpandAll]="true"
[filterRow]="true"
[searchPanel]="true"
filterMode="withAncestors"
>
<oge-column field="name" caption="Name" />
<oge-column field="office" caption="Office" />
</oge-tree-list>
`,
})
export class Demo {
readonly org = [
{ id: 1, parentId: null, name: 'Aylin Koç', title: 'CEO', office: 'İstanbul', headcount: 4 },
{ id: 2, parentId: 1, name: 'Baran Ateş', title: 'VP Engineering', office: 'İstanbul', headcount: 2 },
{ id: 3, parentId: 2, name: 'Ceren Aksu', title: 'Team Lead', office: 'İzmir', headcount: 1 },
{ id: 4, parentId: 3, name: 'Deniz Ünal', title: 'Engineer', office: 'İzmir', headcount: 0 },
{ id: 5, parentId: 1, name: 'Elif Barış', title: 'VP Sales', office: 'Ankara', headcount: 0 },
];
}Notes
'withAncestors'(default) shows matches plus their ancestor rows;'fullBranch'additionally keeps every descendant of a match.- The DataSource never receives filter or search — matching runs over the rows already loaded, and lazily fetched children stay cached across filter changes.
- The search box matches any visible column, locale-safe (İ/i folding included).
- Text inputs debounce (
filterDebounce, default 300 ms).