Needless UI

Vijenzi

Gridi ya data

Panga, chuja, chagua, hariri na pitia safu, hata ziwe nyingi kiasi gani.

Kuingiza

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

NuiGrid

Gridi ya data juu ya jedwali asilia.

Kiteuzi
nui-grid
JinaAinaChaguomsingiMaelezo
rowsPande mbilireadonly T[]Data. Uhariri hubadilisha safu kwa mpya, hivyo unganisha kwa [(rows)].
columnsInputNuiGridColumn<T>[]Safu wima, kama vitu vya NuiGridColumn.
rowIdInput(row: T) => unknownrow.id ?? rowUfunguo wa safu, kwa uchaguzi na ufuatiliaji.
labelInputstringJina linalofikika la gridi.
selectionInput'none' | 'single' | 'multiple''none'Kama safu zinaweza kuchaguliwa, na ngapi.
selectedPande mbiliunknown[][]Funguo za safu zilizochaguliwa.
sortPande mbiliNuiGridSort[][]Upangaji, kama vitu vya { column, direction }; cha kwanza hupanga kwanza.
filtersPande mbiliRecord<string, NuiGridFilter>{}Kichujio kwa kila id ya safu wima: opereta na thamani.
searchPande mbilistring''Maneno ambayo yote lazima yawe katika safu.
pageSizePande mbilinumber0Safu kwa kila ukurasa, au 0 kwa orodha moja inayosogezwa.
pagePande mbilinumber0Ukurasa unaoonyeshwa, kuanzia 0.
pageSizesInputnumber[][10, 25, 50, 100]Chaguo katika kidhibiti cha kurasa.
virtualInputboolean | 'auto''auto'Huchora safu zinazoonekana pekee: daima, kamwe, au kwa auto safu zikizidi 100 bila kurasa.
heightInputstringUrefu wa CSS unaoiwekea gridi kikomo; husogezwa ndani yake.
columnStatePande mbiliNuiGridColumnState[][]Upana, mpangilio, ubandikaji na uonekano wa kila safu wima, ili kuhifadhi na kurejesha.
modeInput'client' | 'server''client'server huonyesha safu jinsi zinavyofika na hukuachia upangaji, uchujaji na kurasa.
totalInputnumberIdadi ya safu kwenye seva.
loadingInputbooleanfalseHuonyesha upau wa maendeleo, na safu za kishika nafasi wakati hakuna safu.
localeInputstringLOCALE_IDHuumbiza namba na tarehe, na husoma namba zilizoandikwa.
labelsInputPartial<NuiGridLabels>Kila maandishi ambayo gridi huonyesha au hutangaza, ili kuyatafsiri.
cornersInputNuiCornersUmbo la pembe zake: round, squircle, bevel, scoop, notch au square.
radiusInputNuiRadiusUkubwa wa pembe zake: none, small, medium, large au full.
densityInputNuiDensityNafasi kinayochukua: compact, regular au roomy.
rowActivateOutputTHutoa safu iliyofunguliwa kwa Enter au kwa kubofya mara mbili.
cellEditOutputNuiGridEdit<T>Hutoa kila uhariri uliothibitishwa.
queryChangeOutputNuiGridQueryHutoa upangaji, vichujio, utafutaji na ukurasa kila vinapobadilika.
exportCsvMbinu(options?) => stringSafu zilizochujwa na kupangwa, za safu wima zinazoonekana, kama CSV.
focusCellMbinu(row: number, col: number) => voidHuweka focus kwenye kisanduku; safu -1 ni kichwa.
clearFiltersMbinu() => voidHufuta kila kichujio na utafutaji.

Input za ubinafsishaji usizoweka hufuata attribute ya data-nui-* iliyo karibu zaidi. Tazama mwongozo wa ubinafsishaji.

NuiGridColumn

Safu wima moja. Ni id na header pekee zinazohitajika.

JinaAinaChaguomsingiMaelezo
idSifastringYa kipekee; ufunguo katika upangaji, vichujio na hali ya safu wima.
headerSifastringMaandishi ya kichwa.
valueSifakeyof T | ((row: T) => V)Ufunguo wa safu, au function ya safu. Chaguomsingi ni row[id].
typeSifa'text' | 'number' | 'date' | 'boolean' | 'enum''text'Huamua jinsi ya kupangilia, kupanga, kuchuja na kuhariri.
formatSifaIntl options | ((value, row) => string)Chaguo za Intl kwa namba na tarehe, au function inayotunga maandishi.
optionsSifaNuiOption<V>[]Chaguo za safu wima ya enum, kama vitu vya NuiOption.
width, minWidth, maxWidthSifanumberKwa pikseli.
flexSifanumberHugawana nafasi iliyobaki na safu wima nyingine za flex.
alignSifa'start' | 'center' | 'end'Chaguomsingi hutegemea aina: namba na tarehe mwishoni.
pinned, hiddenSifa'start' | 'end', booleanUbandikaji na uonekano wa awali wa safu wima.
sortable, filterable, resizable, reorderable, hideableSifabooleantrueKila kimoja kinaweza kuzimwa kwa false.
compareSifa(a: V, b: V) => numberUpangaji maalum.
editable, validateSifaboolean | ((row) => boolean), (value, row) => string | nullKama visanduku vinaweza kuhaririwa, na ujumbe thamani isipokuwa sahihi.
setSifa(row: T, value: V) => THuunda safu iliyohaririwa. Chaguomsingi ni nakala yenye thamani mpya.

NuiGridCell

Huchora visanduku vya safu wima. Muktadha una safu, thamani yake na maandishi yake.

Kiteuzi
ng-template[nuiGridCell]
JinaAinaChaguomsingiMaelezo
nuiGridCellInputstringId ya safu wima.

NuiGridHeader

Huchora kichwa cha safu wima.

Kiteuzi
ng-template[nuiGridHeader]
JinaAinaChaguomsingiMaelezo
nuiGridHeaderInputstringId ya safu wima.

NuiGridEmpty

Kinachoonyeshwa wakati hakuna safu. Muktadha husema kama vichujio vimezificha.

Kiteuzi
ng-template[nuiGridEmpty]