LivaDocs

LivaTreeList

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.

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.

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") + " ₺" : ""),
  },
];
Departman ağacı
Önizleme yükleniyor…

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.

Özyinelemeli seçim
Önizleme yükleniyor…