# LivaTreeList
Package: @dataliva/livalib
Description: @dataliva/livalib hiyerarşik veri tablosu bileşeni.

DevExtreme TreeList üzerine kurulu hiyerarşik veri tablosu. LivaDataGrid ile
aynı veri kaynağı desenini paylaşır; ek olarak `keyExpr` ve `parentIdExpr`
çifti ile düz bir diziden ağaç yapısı kurar. Özyinelemeli seçim, seçim özeti,
satır sürükleme ve satır içi düzenleme özellikleri hazırdır.

```tsx
import { LivaTreeList, type LivaTreeListColumn } from "@dataliva/livalib";
```

## Hiyerarşi

`keyExpr` her satırın anahtarını, `parentIdExpr` üst satırın anahtarını
gösterir. Kök satırlar için `parentId` değeri `0` (varsayılan `rootValue`)
kullanılır. `autoExpandAll` tüm dalları açık başlatır. Kolonlar
`LivaTreeListColumn` tipindedir; sayısal biçimlendirme için `customizeText`
kullanılabilir.

```tsx
type Birim = { id: number; parentId: number; ad: string; yonetici: string; personel: number; butce: number };

const birimler: Birim[] = [
  { id: 1, parentId: 0, ad: "Genel Müdürlük", yonetici: "Ayşe Yılmaz", personel: 4, butce: 1200000 },
  { id: 2, parentId: 1, ad: "Finans", yonetici: "Mehmet Demir", personel: 12, butce: 420000 },
  // ...
];

const kolonlar: LivaTreeListColumn[] = [
  { dataField: "ad", caption: "Birim" },
  { dataField: "yonetici", caption: "Yönetici" },
  { dataField: "personel", caption: "Personel", dataType: "number", alignment: "right", width: 110 },
  {
    dataField: "butce",
    caption: "Bütçe",
    dataType: "number",
    alignment: "right",
    customizeText: (c) => (typeof c.value === "number" ? c.value.toLocaleString("tr-TR") + " ₺" : ""),
  },
];
```

**Örnek — Departman ağacı:**

```tsx
<div style={{ height: 380, width: "100%" }}>
  <LivaTreeList
    dataSource={birimler}
    columns={kolonlar}
    keyExpr="id"
    parentIdExpr="parentId"
    autoExpandAll
    fullHeight
    showBorders
  />
</div>
```

## Seçim

`selectionMode="multiple"` satır başına onay kutuları ekler;
`recursiveSelection` bir üst düğüm seçildiğinde tüm alt düğümleri de seçer.
`showSelectionSummary` başlığın yanına `seçili / toplam` biçiminde bir KPI
pili ekler.

**Örnek — Özyinelemeli seçim:**

```tsx
<div style={{ height: 380, width: "100%" }}>
  <LivaTreeList
    dataSource={birimler}
    columns={kolonlar}
    keyExpr="id"
    parentIdExpr="parentId"
    autoExpandAll
    selectionMode="multiple"
    recursiveSelection
    showSelectionSummary
    selectionSummarySelectedLabel="seçili"
    fullHeight
    showBorders
  />
</div>
```

## Prop'lar

| Prop | Tip | Varsayılan |
|------|------|---------|
| `columns` | `LivaTreeListColumn[]` | — (zorunlu) |
| `keyExpr` | `string` | — (zorunlu) |
| `parentIdExpr` | `string` | — (zorunlu) |
| `dataSource` | `Array<any> \| LivaTreeListDataSourceTypes` | — |
| `rootValue` | `any` | `0` |
| `autoExpandAll` | `boolean` | — |
| `expandedRowKeys` | `any[]` | — |
| `selectionMode` | `'none' \| 'single' \| 'multiple'` | — |
| `recursiveSelection` | `boolean` | — |
| `showSelectionSummary` | `boolean` | — |
| `editMode` | `'cell' \| 'row' \| 'popup' \| 'batch'` | — |
| `height` | `number \| string` | — |
| `showFilterRow` | `boolean` | — |
| `showSearchPanel` | `boolean` | — |
| `showPager` | `boolean` | — |

Ayrıca `exportOptions`, `enableRowDragging`, `dataStructure`
(`'plain' \| 'tree'`) ve `onSelectionChanged`, `onExpandedRowKeysChanged`,
`onRowClick` gibi olay geri çağrıları desteklenir.