Needless UI

Mga component

Data grid

I-sort, i-filter, piliin, i-edit at i-scroll ang kahit ilang row.

Import

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

NuiGrid

Isang data grid sa native na table.

Selector
nui-grid
PangalanUriDefaultPaglalarawan
rowsTwo-wayreadonly T[]Ang data. Pinapalitan ng mga edit ang mga row, kaya i-bind ito gamit ang [(rows)].
columnsInputNuiGridColumn<T>[]Ang mga column, bilang mga NuiGridColumn object.
rowIdInput(row: T) => unknownrow.id ?? rowKey ng isang row, para sa selection at tracking.
labelInputstringAccessible name ng grid.
selectionInput'none' | 'single' | 'multiple''none'Kung puwedeng pumili ng mga row, at kung ilan.
selectedTwo-wayunknown[][]Mga key ng mga napiling row.
sortTwo-wayNuiGridSort[][]Ang sort, bilang mga { column, direction } object; nauunang mag-sort ang una.
filtersTwo-wayRecord<string, NuiGridFilter>{}Isang filter bawat column id: isang operator at isang value.
searchTwo-waystring''Mga salitang dapat lumabas lahat sa isang row.
pageSizeTwo-waynumber0Mga row bawat page, o 0 para sa iisang listahang nag-i-scroll.
pageTwo-waynumber0Ang ipinapakitang page, mula 0.
pageSizesInputnumber[][10, 25, 50, 100]Mga pagpipilian sa pager.
virtualInputboolean | 'auto''auto'Nire-render lang ang mga row na nakikita: palagi, hindi kailanman, o auto kapag lampas 100 row nang walang page.
heightInputstringIsang CSS length na naglilimita sa grid; sa loob ito nag-i-scroll.
columnStateTwo-wayNuiGridColumnState[][]Lapad, pagkakasunod, pin at visibility ng bawat column, para i-save at i-restore.
modeInput'client' | 'server''client'Ipinapakita ng server ang mga row kung paano dumating ang mga ito, at ipinapaubaya sa iyo ang sorting, filtering at paging.
totalInputnumberBilang ng mga row sa server.
loadingInputbooleanfalseNagpapakita ng progress bar, at mga placeholder row habang wala pang row.
localeInputstringLOCALE_IDFino-format ang mga numero at petsa, at binabasa ang mga itinipang numero.
labelsInputPartial<NuiGridLabels>Bawat text na ipinapakita o ina-announce ng grid, para maisalin.
cornersInputNuiCornersAng hugis ng mga sulok nito: round, squircle, bevel, scoop, notch o square.
radiusInputNuiRadiusKung gaano kabilog ang mga sulok nito: none, small, medium, large o full.
densityInputNuiDensityKung gaano kalaking espasyo ang kinukuha nito: compact, regular o roomy.
rowActivateOutputTInilalabas ang row na binuksan gamit ang Enter o double click.
cellEditOutputNuiGridEdit<T>Inilalabas ang bawat na-commit na edit.
queryChangeOutputNuiGridQueryInilalabas ang sort, mga filter, search at page tuwing nagbabago ang mga ito.
exportCsvMethod(options?) => stringAng mga na-filter at na-sort na row ng mga nakikitang column, bilang CSV.
focusCellMethod(row: number, col: number) => voidInililipat ang focus sa isang cell; header ang row -1.
clearFiltersMethod() => voidKini-clear ang bawat filter at ang search.

Sinusunod ng mga customization input na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiGridColumn

Isang column. id at header lang ang required.

PangalanUriDefaultPaglalarawan
idPropertystringNatatangi; ang key sa sort, mga filter at column state.
headerPropertystringAng text ng header.
valuePropertykeyof T | ((row: T) => V)Isang key ng row, o function ng row. row[id] ang default.
typeProperty'text' | 'number' | 'date' | 'boolean' | 'enum''text'Pinipili ang alignment, sort, filter at editor.
formatPropertyIntl options | ((value, row) => string)Mga Intl option para sa mga numero at petsa, o function na gumagawa ng text.
optionsPropertyNuiOption<V>[]Mga pagpipilian ng isang enum column, bilang mga NuiOption object.
width, minWidth, maxWidthPropertynumberSa pixel.
flexPropertynumberHinahati ang natitirang espasyo sa iba pang flex column.
alignProperty'start' | 'center' | 'end'Nakadepende sa type ang default: nasa dulo ang mga numero at petsa.
pinned, hiddenProperty'start' | 'end', booleanAng paunang pin at visibility ng column.
sortable, filterable, resizable, reorderable, hideablePropertybooleantruePuwedeng i-off ang bawat isa gamit ang false.
compareProperty(a: V, b: V) => numberIsang custom na sort.
editable, validatePropertyboolean | ((row) => boolean), (value, row) => string | nullKung puwedeng i-edit ang mga cell, at mensahe kapag hindi valid ang value.
setProperty(row: T, value: V) => TGinagawa ang na-edit na row. Kopyang may bagong value ang default.

NuiGridCell

Iginuguhit ang mga cell ng isang column. Nasa context ang row, ang value nito at ang text nito.

Selector
ng-template[nuiGridCell]
PangalanUriDefaultPaglalarawan
nuiGridCellInputstringAng id ng column.

NuiGridHeader

Iginuguhit ang header ng isang column.

Selector
ng-template[nuiGridHeader]
PangalanUriDefaultPaglalarawan
nuiGridHeaderInputstringAng id ng column.

NuiGridEmpty

Ang ipinapakita kapag walang row. Sinasabi ng context kung mga filter ang nagtago sa mga ito.

Selector
ng-template[nuiGridEmpty]