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.
Tüm prop'lar aşağıda listelenmiştir. ᴰˣ ile işaretli olanlar LivaList'in
kendi prop'ları değildir; alttaki DevExtreme List'ten (ve temel Widget
zincirinden) miras alınır ve ...rest ile doğrudan aktarılır.
| Prop | Tip | Varsayılan |
|---|---|---|
items | LivaListItem[] | — (zorunlu) |
keyExpr | string | 'id' |
displayExpr | string | 'name' |
selectionMode | 'none' | 'single' | 'multiple' | 'none' |
showSelectionControls | boolean | false |
selectedKeys | any[] | — |
onSelectionChanged | (e) => void | — |
showItemActions | boolean | onEdit/onDelete varsa |
actionsPlacement | 'hover' | 'always' | 'menu' | 'menu' |
onEdit | (item: LivaListItem) => void | — |
onDelete | (item: LivaListItem) => void | — |
itemRender | (item, index, actionsElement) => ReactNode | — |
itemClassName | string | ((item) => string) | — |
className | string | '' |
height | number | string | '100%' |
width | number | string | '100%' |
dataSource ᴰˣ | DataSourceLike | null | — |
noDataText ᴰˣ | string | — |
grouped ᴰˣ | boolean | — |
collapsibleGroups ᴰˣ | boolean | — |
groupTemplate ᴰˣ | template | — |
itemTemplate ᴰˣ | template | — |
allowItemDeleting ᴰˣ | boolean | — |
itemDeleteMode ᴰˣ | 'context' | 'slideButton' | 'slideItem' | 'static' | 'swipe' | 'toggle' | — |
itemDragging ᴰˣ | dxSortableOptions | — |
itemHoldTimeout ᴰˣ | number | — |
menuItems ᴰˣ | Array<{ text; action }> | — |
menuMode ᴰˣ | 'context' | 'slide' | — |
searchEnabled ᴰˣ | boolean | — |
searchExpr ᴰˣ | string | Function | Array<string | Function> | — |
searchMode ᴰˣ | 'contains' | 'startswith' | 'equals' | — |
searchValue ᴰˣ | string | — |
searchTimeout ᴰˣ | number | — |
searchEditorOptions ᴰˣ | TextBoxProperties | — |
selectAllMode ᴰˣ | 'allPages' | 'page' | — |
selectAllText ᴰˣ | string | — |
selectByClick ᴰˣ | boolean | — |
selectedItemKeys ᴰˣ | any[] | — |
selectedItems ᴰˣ | any[] | — |
selectedItem ᴰˣ | any | — |
selectedIndex ᴰˣ | number | — |
pageLoadMode ᴰˣ | 'nextButton' | 'scrollBottom' | — |
pageLoadingText ᴰˣ | string | — |
nextButtonText ᴰˣ | string | — |
indicateLoading ᴰˣ | boolean | — |
repaintChangesOnly ᴰˣ | boolean | — |
pullRefreshEnabled ᴰˣ | boolean | — |
pulledDownText ᴰˣ | string | — |
pullingDownText ᴰˣ | string | — |
refreshingText ᴰˣ | string | — |
bounceEnabled ᴰˣ | boolean | — |
scrollingEnabled ᴰˣ | boolean | — |
scrollByContent ᴰˣ | boolean | — |
scrollByThumb ᴰˣ | boolean | — |
showScrollbar ᴰˣ | 'always' | 'never' | 'onHover' | 'onScroll' | — |
useNativeScrolling ᴰˣ | boolean | — |
activeStateEnabled ᴰˣ | boolean | — |
focusStateEnabled ᴰˣ | boolean | — |
hoverStateEnabled ᴰˣ | boolean | — |
disabled ᴰˣ | boolean | — |
visible ᴰˣ | boolean | — |
hint ᴰˣ | string | — |
accessKey ᴰˣ | string | — |
tabIndex ᴰˣ | number | — |
rtlEnabled ᴰˣ | boolean | — |
elementAttr ᴰˣ | Record<string, any> | — |
onItemClick ᴰˣ | (e) => void | — |
onItemContextMenu ᴰˣ | (e) => void | — |
onItemHold ᴰˣ | (e) => void | — |
onItemRendered ᴰˣ | (e) => void | — |
onItemDeleted ᴰˣ | (e) => void | — |
onItemDeleting ᴰˣ | (e) => void | — |
onItemReordered ᴰˣ | (e) => void | — |
onItemSwipe ᴰˣ | (e) => void | — |
onGroupRendered ᴰˣ | (e) => void | — |
onSelectionChanging ᴰˣ | (e) => void | — |
onSelectAllValueChanged ᴰˣ | (e) => void | — |
onPageLoading ᴰˣ | (e) => void | — |
onPullRefresh ᴰˣ | (e) => void | — |
onScroll ᴰˣ | (e) => void | — |
onContentReady ᴰˣ | (e) => void | — |
onDisposing ᴰˣ | (e) => void | — |
onOptionChanged ᴰˣ | (e) => void | — |
ᴰˣ = DevExtreme List'ten miras alınan (inherited) seçenek — LivaList özel
olarak tanımlamaz, ...rest üzerinden alttaki List bileşenine geçer.