Tree List

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"
    >
      <oge-column field="name" caption="Name" />
      <oge-column field="title" caption="Title" [width]="140" />
      <oge-column field="office" caption="Office" [width]="140" />
      <oge-column field="headcount" caption="Reports" dataType="number" [width]="110" />
    </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 },
  ];
}