LivaList
DevExtreme List üzerine kurulu hafif liste bileşeni. items dizisindeki
öğeleri displayExpr alanına göre gösterir; tekli/çoklu seçim, öğe başına
düzenle/sil aksiyonları ve özel itemRender desteği sunar.
import { LivaList } from "@dataliva/livalib";
Basit liste
items zorunludur; keyExpr öğe anahtarını, displayExpr görüntülenecek
alanı belirtir.
type Sehir = { id: number; ad: string; bolge: string };
const sehirler: Sehir[] = [
{ id: 1, ad: "İstanbul", bolge: "Marmara" },
{ id: 2, ad: "Ankara", bolge: "İç Anadolu" },
// ...
];
Seçim
selectionMode="multiple" ile showSelectionControls her öğeye onay kutusu
ekler. Seçilen anahtarlar selectedKeys ile kontrol edilebilir,
onSelectionChanged ile dinlenir.
Öğe aksiyonları
showItemActions her öğeye düzenle/sil düğmeleri ekler. actionsPlacement
düğmelerin görünme biçimini belirler: 'hover' üzerine gelince, 'always'
her zaman, 'menu' ise üç nokta menüsünde gösterir. onEdit ve onDelete
geri çağrıları tıklanan öğeyi alır.
| Prop | Tip | Varsayılan |
|---|---|---|
items | LivaListItem[] | — (zorunlu) |
keyExpr | string | — |
displayExpr | string | — |
selectionMode | 'none' | 'single' | 'multiple' | — |
showSelectionControls | boolean | — |
selectedKeys | any[] | — |
onSelectionChanged | (e) => void | — |
showItemActions | boolean | — |
actionsPlacement | 'hover' | 'always' | 'menu' | — |
onEdit | (item: LivaListItem) => void | — |
onDelete | (item: LivaListItem) => void | — |
itemRender | (item, index, actionsElement) => ReactNode | — |
itemClassName | string | ((item) => string) | — |
height | number | string | — |
width | number | string | — |
Ayrıca DevExtreme List'ten gelen diğer seçenekler (ör. searchEnabled,
grouped, noDataText) doğrudan kullanılabilir.