Needless UI

Bileşenler

Veri tablosu

İstediğiniz sayıda satırı sıralayın, filtreleyin, seçin, düzenleyin ve kaydırın.

İçe aktarma

import-grid.ts
import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';

NuiGrid

Yerel tabloya dayalı veri tablosu.

Seçici
nui-grid
AdTürVarsayılanAçıklama
rowsÇift yönlüreadonly T[]Veri. Düzenlemeler satırları yenileriyle değiştirir; [(rows)] ile bağlayın.
columnsGirdiNuiGridColumn<T>[]NuiGridColumn nesneleri biçiminde sütunlar.
rowIdGirdi(row: T) => unknownrow.id ?? rowSeçim ve takip için satırın anahtarı.
labelGirdistringTablonun erişilebilir adı.
selectionGirdi'none' | 'single' | 'multiple''none'Satır seçilip seçilemeyeceği ve kaç tane.
selectedÇift yönlüunknown[][]Seçili satırların anahtarları.
sortÇift yönlüNuiGridSort[][]{ column, direction } nesneleri biçiminde sıralama; ilki önceliklidir.
filtersÇift yönlüRecord<string, NuiGridFilter>{}Sütun id’si başına bir filtre: bir operatör ve bir değer.
searchÇift yönlüstring''Bir satırda hepsinin geçmesi gereken sözcükler.
pageSizeÇift yönlünumber0Sayfa başına satır; tek kaydırılabilir liste için 0.
pageÇift yönlünumber0Gösterilen sayfa, 0’dan başlar.
pageSizesGirdinumber[][10, 25, 50, 100]Sayfalayıcıdaki seçenekler.
virtualGirdiboolean | '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.
heightGirdistringTabloyu sınırlayan CSS uzunluğu; tablo içeride kayar.
columnStateÇift yönlüNuiGridColumnState[][]Her sütunun genişliği, sırası, sabitlemesi ve görünürlüğü; kaydedip geri yüklemek için.
modeGirdi'client' | 'server''client'server, satırları geldiği gibi gösterir; sıralama, filtreleme ve sayfalamayı size bırakır.
totalGirdinumberSunucudaki satır sayısı.
loadingGirdibooleanfalseBir ilerleme çubuğu, satır yokken de yer tutucu satırlar gösterir.
localeGirdistringLOCALE_IDSayıları ve tarihleri biçimlendirir, yazılan sayıları okur.
labelsGirdiPartial<NuiGridLabels>Tablonun gösterdiği veya duyurduğu her metin; çeviri için.
cornersGirdiNuiCornersKöşelerin şekli: round, squircle, bevel, scoop, notch veya square.
radiusGirdiNuiRadiusKöşelerin ne kadar yuvarlatıldığı: none, small, medium, large veya full.
densityGirdiNuiDensityBileşenin ne kadar yer kapladığı: compact, regular veya roomy.
rowActivateÇıktıTEnter veya çift tıklamayla açılan satırı yayar.
cellEditÇıktıNuiGridEdit<T>Onaylanan her düzenlemeyi yayar.
queryChangeÇıktıNuiGridQuerySıralama, filtreler, arama veya sayfa her değiştiğinde bunları yayar.
exportCsvMetot(options?) => stringGörünür sütunların filtrelenmiş ve sıralanmış satırları, CSV olarak.
focusCellMetot(row: number, col: number) => voidHücreye odaklanır; satır -1 başlıktır.
clearFiltersMetot() => voidTüm filtreleri ve aramayı temizler.

Ayarlamadığınız özelleştirme girdileri, 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. Yalnızca id ve header zorunludur.

AdTürVarsayılanAçıklama
idÖzellikstringBenzersiz; sıralamada, filtrelerde ve sütun durumunda anahtardır.
headerÖzellikstringBaşlık metni.
valueÖzellikkeyof T | ((row: T) => V)Satırdaki bir anahtar ya da satırı alan bir fonksiyon. Varsayılan: row[id].
typeÖzellik'text' | 'number' | 'date' | 'boolean' | 'enum''text'Hizalamayı, sıralamayı, filtreyi ve düzenleyiciyi belirler.
formatÖzellikIntl options | ((value, row) => string)Sayılar ve tarihler için Intl seçenekleri ya da metni üreten bir fonksiyon.
optionsÖzellikNuiOption<V>[]Bir enum sütununun seçenekleri; NuiOption nesneleri biçiminde.
width, minWidth, maxWidthÖzelliknumberPiksel cinsinden.
flexÖzelliknumberKalan alanı diğer flex sütunlarıyla paylaşır.
alignÖzellik'start' | 'center' | 'end'Varsayılanı türe göre: sayılar ve tarihler sonda.
pinned, hiddenÖzellik'start' | 'end', booleanSütunun ilk sabitlemesi ve görünürlüğü.
sortable, filterable, resizable, reorderable, hideableÖzellikbooleantrueHer biri false ile kapatılabilir.
compareÖzellik(a: V, b: V) => numberÖzel bir sıralama.
editable, validateÖzellikboolean | ((row) => boolean), (value, row) => string | nullHücrelerin düzenlenip düzenlenemeyeceği ve değer geçersizken gösterilecek mesaj.
setÖzellik(row: T, value: V) => TDüzenlenen satırı oluşturur. Varsayılan: yeni değeri taşıyan bir kopya.

NuiGridCell

Bir sütunun hücrelerini çizer. Bağlamda satır, değer ve metin bulunur.

Seçici
ng-template[nuiGridCell]
AdTürVarsayılanAçıklama
nuiGridCellGirdistringSütunun id’si.

NuiGridHeader

Bir sütunun başlığını çizer.

Seçici
ng-template[nuiGridHeader]
AdTürVarsayılanAçıklama
nuiGridHeaderGirdistringSütunun id’si.

NuiGridEmpty

Satır yokken gösterilen içerik. Bağlam, satırları filtrelerin gizleyip gizlemediğini söyler.

Seçici
ng-template[nuiGridEmpty]