Needless UI

Components

Data grid

Ku jera, ku tace, ku zaɓa, ku gyara kuma ku gungura layuka, komai yawansu.

Shigo da shi

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

NuiGrid

Data grid a kan tebur na asali.

Selector
nui-grid
SunaIriNa asaliBayani
rowsHanya biyureadonly T[]Bayanan. Gyara yana maye gurbin layuka, don haka ku haɗa da [(rows)].
columnsInputNuiGridColumn<T>[]Ginshiƙan, a matsayin objects na NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowKey na layi, don zaɓi da bibiya.
labelInputstringSunan da ake sanarwa na grid ɗin.
selectionInput'none' | 'single' | 'multiple''none'Ko ana iya zaɓar layuka, da guda nawa.
selectedHanya biyuunknown[][]Keys na layukan da aka zaɓa.
sortHanya biyuNuiGridSort[][]Jerawar, a matsayin objects na { column, direction }; na farko ne ke da fifiko.
filtersHanya biyuRecord<string, NuiGridFilter>{}Tacewa ɗaya ga kowane id na ginshiƙi: operator da ƙima.
searchHanya biyustring''Kalmomin da dole ne duka su kasance a cikin layi.
pageSizeHanya biyunumber0Layuka a kowane shafi, ko 0 don jeri ɗaya mai gungurawa.
pageHanya biyunumber0Shafin da ake nunawa, daga 0.
pageSizesInputnumber[][10, 25, 50, 100]Zaɓuɓɓukan da ke cikin pager.
virtualInputboolean | 'auto''auto'Yana nuna layukan da ake gani kawai: koyaushe, ba ko kaɗan, ko auto idan layuka sun wuce 100 ba tare da shafuka ba.
heightInputstringTsawon CSS da ke iyakance grid ɗin; yana gungurawa a ciki.
columnStateHanya biyuNuiGridColumnState[][]Faɗi, matsayi, kafewa da bayyanar kowane ginshiƙi, don adanawa da maidowa.
modeInput'client' | 'server''client'server yana nuna layuka yadda suke zuwa, kuma yana bar muku jerawa, tacewa da raba shafuka.
totalInputnumberYawan layuka a server.
loadingInputbooleanfalseYana nuna sandar ci gaba, da layukan riƙe wuri idan babu layuka.
localeInputstringLOCALE_IDYana tsara lambobi da kwanan wata, kuma yana karanta lambobin da aka rubuta.
labelsInputPartial<NuiGridLabels>Kowane rubutu da grid ɗin ke nunawa ko sanarwa, don fassarawa.
cornersInputNuiCornersSiffar kusurwoyinsa: round, squircle, bevel, scoop, notch ko square.
radiusInputNuiRadiusGirman kusurwoyinsa: none, small, medium, large ko full.
densityInputNuiDensityYawan sararin da yake ɗauka: compact, regular ko roomy.
rowActivateOutputTYana fitar da layin da aka buɗe da Enter ko danna sau biyu.
cellEditOutputNuiGridEdit<T>Yana fitar da kowane gyaran da aka tabbatar.
queryChangeOutputNuiGridQueryYana fitar da jerawa, tacewa, bincike da shafi duk lokacin da suka canza.
exportCsvMethod(options?) => stringLayukan da aka tace aka jera na ginshiƙan da ake gani, a matsayin CSV.
focusCellMethod(row: number, col: number) => voidYana kai focus kan cell; layi -1 shi ne layin take.
clearFiltersMethod() => voidYana share kowace tacewa da binciken.

Inputs na keɓancewa da ba ku saita ba suna bin attribute na data-nui-* mafi kusa. Ku duba jagorar keɓancewa.

NuiGridColumn

Ginshiƙi ɗaya. id da header kaɗai ake buƙata.

SunaIriNa asaliBayani
idKadarastringBa a maimaita shi; shi ne key a jerawa, tacewa da yanayin ginshiƙai.
headerKadarastringRubutun taken ginshiƙi.
valueKadarakeyof T | ((row: T) => V)Key na layin, ko function na layin. Idan ba a saita ba, row[id] ne.
typeKadara'text' | 'number' | 'date' | 'boolean' | 'enum''text'Yana zaɓar daidaitawa, jerawa, tacewa da editor.
formatKadaraIntl options | ((value, row) => string)Zaɓuɓɓukan Intl don lambobi da kwanan wata, ko function da ke samar da rubutun.
optionsKadaraNuiOption<V>[]Zaɓuɓɓukan ginshiƙin enum, a matsayin objects na NuiOption.
width, minWidth, maxWidthKadaranumberA pixels.
flexKadaranumberYana raba sararin da ya rage da sauran ginshiƙan flex.
alignKadara'start' | 'center' | 'end'Ya danganta da iri: lambobi da kwanan wata a ƙarshe.
pinned, hiddenKadara'start' | 'end', booleanKafewa da bayyanar ginshiƙin ta farko.
sortable, filterable, resizable, reorderable, hideableKadarabooleantrueAna iya kashe kowanne da false.
compareKadara(a: V, b: V) => numberJerawa ta musamman.
editable, validateKadaraboolean | ((row) => boolean), (value, row) => string | nullKo ana iya gyara cells, da saƙo idan ƙima ba ta da inganci.
setKadara(row: T, value: V) => TYana samar da layin da aka gyara. Idan ba a saita ba, kwafi ne mai sabuwar ƙimar.

NuiGridCell

Yana zana cells na ginshiƙi. Context ɗin yana ɗauke da layin, ƙimarsa da rubutunsa.

Selector
ng-template[nuiGridCell]
SunaIriNa asaliBayani
nuiGridCellInputstringId na ginshiƙin.

NuiGridHeader

Yana zana taken ginshiƙi.

Selector
ng-template[nuiGridHeader]
SunaIriNa asaliBayani
nuiGridHeaderInputstringId na ginshiƙin.

NuiGridEmpty

Abin da ake nunawa idan babu layuka. Context ɗin yana faɗa ko tacewa ce ta ɓoye su.

Selector
ng-template[nuiGridEmpty]