Needless UI

Komponen

Grid data

Urutna, saring, pilih, sunting lan gulung baris, sepira wae akehe.

Import

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

NuiGrid

Grid data ing tabel native.

Selector
nui-grid
JenengJinisGawanKatrangan
rowsRong arahreadonly T[]Data. Suntingan ngganti baris, dadi bind nganggo [(rows)].
columnsInputNuiGridColumn<T>[]Kolom-kolom, minangka obyek NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowKunci baris, kanggo milih lan nglacak.
labelInputstringJeneng aksesibel grid.
selectionInput'none' | 'single' | 'multiple''none'Apa baris bisa dipilih, lan pira.
selectedRong arahunknown[][]Kunci baris-baris sing dipilih.
sortRong arahNuiGridSort[][]Urutan, minangka obyek { column, direction }; sing kapisan ngurutake dhisik.
filtersRong arahRecord<string, NuiGridFilter>{}Saringan saben id kolom: operator lan nilai.
searchRong arahstring''Tembung-tembung sing kabeh kudu ana ing baris.
pageSizeRong arahnumber0Baris saben kaca, utawa 0 kanggo siji dhaptar sing digulung.
pageRong arahnumber0Kaca sing ditampilake, wiwit 0.
pageSizesInputnumber[][10, 25, 50, 100]Pilihan ing navigasi kaca.
virtualInputboolean | 'auto''auto'Mung nggambar baris sing katon: tansah, ora tau, utawa kanthi auto yen luwih saka 100 baris tanpa kaca.
heightInputstringDawa CSS sing mbatesi grid; isine digulung ing njero.
columnStateRong arahNuiGridColumnState[][]Ambane, urutan, status semat lan visibilitas saben kolom, kanggo disimpen lan dibalekake.
modeInput'client' | 'server''client'server nampilake baris kaya tekane lan masrahake urutan, saringan lan kaca marang panjenengan.
totalInputnumberCacahe baris ing server.
loadingInputbooleanfalseNampilake bar progres, lan baris placeholder nalika durung ana baris.
localeInputstringLOCALE_IDNgformat angka lan tanggal, lan maca angka sing diketik.
labelsInputPartial<NuiGridLabels>Saben teks sing ditampilake utawa diumumake grid, kanggo diterjemahake.
cornersInputNuiCornersWangun pojoke: round, squircle, bevel, scoop, notch utawa square.
radiusInputNuiRadiusSepira gedhene pojoke: none, small, medium, large utawa full.
densityInputNuiDensitySepira akehe papan sing dienggo: compact, regular utawa roomy.
rowActivateOutputTNgetokake baris sing dibukak nganggo Enter utawa klik kaping pindho.
cellEditOutputNuiGridEdit<T>Ngetokake saben suntingan sing wis ditetepake.
queryChangeOutputNuiGridQueryNgetokake urutan, saringan, panelusuran lan kaca saben ana owah-owahan.
exportCsvMetode(options?) => stringBaris sing wis disaring lan diurutake saka kolom sing katon, minangka CSV.
focusCellMetode(row: number, col: number) => voidMindhah fokus menyang sel; baris -1 yaiku header.
clearFiltersMetode() => voidMbusak kabeh saringan lan panelusuran.

Input kustomisasi sing ora panjenengan setel bakal ngetutake attribute data-nui-* sing paling cedhak. Pirsani pandhuan kustomisasi.

NuiGridColumn

Siji kolom. Mung id lan header sing wajib.

JenengJinisGawanKatrangan
idPropertistringUnik; kunci ing urutan, saringan lan kahanan kolom.
headerPropertistringTeks header.
valuePropertikeyof T | ((row: T) => V)Kunci saka baris, utawa fungsi saka baris. Gawane row[id].
typeProperti'text' | 'number' | 'date' | 'boolean' | 'enum''text'Nemtokake perataan, urutan, saringan lan editor.
formatPropertiIntl options | ((value, row) => string)Pilihan Intl kanggo angka lan tanggal, utawa fungsi sing nggawe teks.
optionsPropertiNuiOption<V>[]Pilihan kolom enum, minangka obyek NuiOption.
width, minWidth, maxWidthPropertinumberIng piksel.
flexPropertinumberMbagi papan sing isih turah karo kolom flex liyane.
alignProperti'start' | 'center' | 'end'Gawane miturut jinis: angka lan tanggal ing pungkasan.
pinned, hiddenProperti'start' | 'end', booleanStatus semat lan visibilitas wiwitan kolom.
sortable, filterable, resizable, reorderable, hideablePropertibooleantrueSaben siji bisa dipateni nganggo false.
compareProperti(a: V, b: V) => numberUrutan kustom.
editable, validatePropertiboolean | ((row) => boolean), (value, row) => string | nullApa sel bisa disunting, lan pesen nalika nilaine ora valid.
setProperti(row: T, value: V) => TNggawe baris sing wis disunting. Gawane salinan kanthi nilai anyar.

NuiGridCell

Nggambar sel-sel sawijining kolom. Konteks-e ngemot baris, nilaine lan teks-e.

Selector
ng-template[nuiGridCell]
JenengJinisGawanKatrangan
nuiGridCellInputstringId kolom.

NuiGridHeader

Nggambar header sawijining kolom.

Selector
ng-template[nuiGridHeader]
JenengJinisGawanKatrangan
nuiGridHeaderInputstringId kolom.

NuiGridEmpty

Apa sing katon nalika ora ana baris. Konteks-e ngandhani apa baris-baris didhelikake saringan.

Selector
ng-template[nuiGridEmpty]