Virtual Scrolling
The tree flattens only the visible branches (collapsed subtrees cost nothing) and windows the DOM with the same Fenwick-tree virtualizer the grid uses — a 100k-node tree scrolls like a 100-row one.
virtualScroll 100k nodes
O(visible) flatten windowed DOM
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeList } from '@oge-ui/tree-list';
@Component({
selector: 'demo-root',
imports: [OgeTreeList],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- 100 branches × 999 rows = 100.000 nodes -->
<oge-tree-list
[data]="rows"
keyExpr="id"
parentIdExpr="parentId"
[autoExpandAll]="true"
[virtualScroll]="true"
style="height: 480px"
/>
`,
})
export class Demo {
protected readonly rows = Array.from({ length: 100 }, (_, branch) => [
{ id: branch * 1000, parentId: null, name: `Branch ${branch + 1}` },
...Array.from({ length: 999 }, (_, leaf) => ({
id: branch * 1000 + leaf + 1,
parentId: branch * 1000,
name: `Node ${leaf + 1}`,
})),
]).flat();
}Notes
- Expanding or collapsing re-flattens only the visible rows, never the full 100k.
- Collapse all branches and the scrollbar shrinks to the root count instantly.
scrollToRow(key)jumps anywhere in the virtual space.