React için Veri tablosu API’si

İçe aktarma

import-grid.tsx

import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

Yerel tabloya dayalı veri tablosu.

NuiGrid: Özellikler
Ad	Tür	Varsayılan	Açıklama
`rows`Prop	`readonly T[]`		Veri. Bir düzenleme kendi satırını değiştirir ve `onRowsChange` fonksiyonunu çağırır; daha sonra verdiğiniz `rows` düzenlemelerin yerini alır.
`onRowsChange`Geri çağırma	`(rows: readonly T[]) => void`		Onaylanan her düzenlemeden sonra satırlarla çağrılır.
`columns`Prop	`NuiGridColumn<T>[]`		`NuiGridColumn` nesneleri biçiminde sütunlar.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Seçim ve takip için satırın anahtarı.
`label`Prop	`string`		Tablonun erişilebilir adı.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Satır seçilip seçilemeyeceği ve kaç tane.
`selected` `defaultSelected` `onSelectedChange`Durum	`unknown[]`	`[]`	Seçili satırların anahtarları.
`sort` `defaultSort` `onSortChange`Durum	`NuiGridSort[]`	`[]`	`{ column, direction }` nesneleri biçiminde sıralama; ilki önceliklidir.
`filters` `defaultFilters` `onFiltersChange`Durum	`Record<string, NuiGridFilter>`	`{}`	Sütun id’si başına bir filtre: bir operatör ve bir değer.
`search` `defaultSearch` `onSearchChange`Durum	`string`	`''`	Bir satırda hepsinin geçmesi gereken sözcükler.
`pageSize` `defaultPageSize` `onPageSizeChange`Durum	`number`	`0`	Sayfa başına satır; tek kaydırılabilir liste için 0.
`page` `defaultPage` `onPageChange`Durum	`number`	`0`	Gösterilen sayfa, 0’dan başlar.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Sayfalayıcıdaki seçenekler.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Yalnızca görünen satırları render eder: her zaman, hiçbir zaman ya da `auto` ile sayfalama yokken 100 satırı aşınca.
`height`Prop	`string`		Tabloyu sınırlayan CSS uzunluğu; tablo içeride kayar.
`columnState` `defaultColumnState` `onColumnStateChange`Durum	`NuiGridColumnState[]`	`[]`	Her sütunun genişliği, sırası, sabitlemesi ve görünürlüğü; kaydedip geri yüklemek için.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server`, satırları geldiği gibi gösterir; sıralama, filtreleme ve sayfalamayı size bırakır.
`total`Prop	`number`		Sunucudaki satır sayısı.
`loading`Prop	`boolean`	`false`	Bir ilerleme çubuğu, satır yokken de yer tutucu satırlar gösterir.
`locale`Prop	`string`	`'en-US'`	Sayıları ve tarihleri biçimlendirir, yazılan sayıları okur.
`labels`Prop	`Partial<NuiGridLabels>`		Tablonun gösterdiği veya duyurduğu her metin; çeviri için.
`corners`Prop	`NuiCorners`		Köşelerin şekli: `round`, `squircle`, `bevel`, `scoop`, `notch` veya `square`.
`radius`Prop	`NuiRadius`		Köşelerin ne kadar yuvarlatıldığı: `none`, `small`, `medium`, `large` veya `full`.
`density`Prop	`NuiDensity`		Bileşenin ne kadar yer kapladığı: `compact`, `regular` veya `roomy`.
`groupBy`Prop	`string[]`	`[]`	Satırların gruplanacağı sütunlar, en dıştaki önce.
`collapsed` `defaultCollapsed` `onCollapsedChange`Durum	`string[]`	`[]`	Kapalı grupların anahtarları; gruplar açık başlar.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Bir satırın alt satırları: tablo ağaç verisi gösterir.
`expanded` `defaultExpanded` `onExpandedChange`Durum	`unknown[]`	`[]`	Ağaç verisinde açık olan satırların anahtarları; satırlar kapalı başlar.
`details` `defaultDetails` `onDetailsChange`Durum	`unknown[]`	`[]`	Ayrıntıları açık olan satırların anahtarları.
`totals, flash`Prop	`boolean`	`false`	Filtrelenmiş tüm satırların özet değerlerini gösteren bir satır; kalıcı bir `rowId` taşıyan satırlarda, metni değişince bir an parlayan hücreler.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` satırları kart olarak gösterir, `auto` ise bunu dar ekranlarda yapar.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Satırları sıralayan, filtreleyen ve hepsini seçen bir çubuk: her zaman, hiçbir zaman ya da `auto` ile kartlarda.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Satır yokken gösterilen içerik; satırları filtrelerin gizleyip gizlemediği de ona bildirilir.
`renderDetail`Render prop	`(row: T) => ReactNode`		Bir satırın ayrıntıları; açıldığında satırın altında gösterilir. Tablo bir açma düğmeleri sütunu ekler.
`onRowActivate`Geri çağırma	`(row: T) => void`		Enter veya çift tıklamayla açılan satırla çağrılır.
`onCellEdit`Geri çağırma	`(edit: NuiGridEdit<T>) => void`		Onaylanan her düzenlemeyle çağrılır.
`onQueryChange`Geri çağırma	`(query: NuiGridQuery) => void`		Sıralama, filtreler, arama ve sayfa her değiştiğinde ve başlangıçta bir kez bunlarla çağrılır.
`ref`Prop	`Ref<NuiGridHandle>`		Tablonun `ref` üzerinden sundukları: dışa aktarma, yazdırma ve odak.
`exportXlsx, print`Metot	`(options?) => Blob, () => void`		Filtrelenmiş ve sıralanmış satırlar, elektronik tablo olarak; tüm satırları yazdırır.
`exportCsv`Metot	`(options?) => string`		Görünür sütunların filtrelenmiş ve sıralanmış satırları, CSV olarak.
`expandAll`Metot	`(open?: boolean) => void`		Tüm grupları ve alt satırı olan tüm satırları açar ya da hepsini kapatır.
`focusCell`Metot	`(row: number, col: number) => void`		Hücreye odaklanır; satır `-1` başlıktır.
`clearFilters`Metot	`() => void`		Tüm filtreleri ve aramayı temizler.
`fit`Metot	`(id: string) => void`		Bir sütunu, render edilmiş hücrelerinin en genişine sığdırır.

Durum, React’in kendi form öğeleri gibi çalışır: bir değer verip onu on…Change geri çağırmasıyla güncelleyin ya da bir default… değeri verip onu bileşenin tutmasına bırakın.

Ayarlamadığınız özelleştirme prop’ları, değerlerini en yakın data-nui-* niteliğinden alır. Ayrıntılar için özelleştirme kılavuzuna bakın.

NuiGridColumn

Tek bir sütun. Angular sütununun tüm özelliklerini (yalnızca id ve header zorunludur) ve onu çizen bu iki özelliği alır.

NuiGridColumn: Özellikler
Ad	Tür	Varsayılan	Açıklama
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Sütunun hücrelerini kendiniz çizmenizi sağlar; satırı, değerini ve metnini alır.
`renderHeader`Render prop	`(column) => ReactNode`		Sütunun başlığını kendiniz çizmenizi sağlar; adını yine `header` verir.