ఇంపోర్ట్
import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';NuiGrid
నేటివ్ టేబుల్పై డేటా గ్రిడ్.
| పేరు | టైప్ | డిఫాల్ట్ | వివరణ |
|---|---|---|---|
rowsటూ-వే | readonly T[] | డేటా. ఎడిట్ అయిన వరుస స్థానంలో కొత్తది వస్తుంది, కాబట్టి [(rows)] తో బైండ్ చేయండి. | |
columnsఇన్పుట్ | NuiGridColumn<T>[] | కాలమ్లు, NuiGridColumn ఆబ్జెక్ట్లుగా. | |
rowIdఇన్పుట్ | (row: T) => unknown | row.id ?? row | ఎంపిక, ట్రాకింగ్ కోసం వరుస కీ. |
labelఇన్పుట్ | string | గ్రిడ్ యాక్సెసిబుల్ పేరు. | |
selectionఇన్పుట్ | 'none' | 'single' | 'multiple' | 'none' | వరుసలను ఎంచుకోవచ్చో లేదో, ఎన్నింటిని. |
selectedటూ-వే | unknown[] | [] | ఎంచుకున్న వరుసల కీలు. |
sortటూ-వే | NuiGridSort[] | [] | సార్ట్, { column, direction } ఆబ్జెక్ట్లుగా; మొదటిది ముందు సార్ట్ చేస్తుంది. |
filtersటూ-వే | Record<string, NuiGridFilter> | {} | ప్రతి కాలమ్ id కి ఒక ఫిల్టర్: ఒక ఆపరేటర్, ఒక విలువ. |
searchటూ-వే | string | '' | ఒక వరుసలో అన్నీ ఉండాల్సిన పదాలు. |
pageSizeటూ-వే | number | 0 | ఒక్కో పేజీకి వరుసలు, లేదా ఒకే స్క్రోలింగ్ జాబితాకు 0. |
pageటూ-వే | number | 0 | చూపిస్తున్న పేజీ, 0 నుంచి. |
pageSizesఇన్పుట్ | number[] | [10, 25, 50, 100] | పేజర్లోని ఎంపికలు. |
virtualఇన్పుట్ | boolean | 'auto' | 'auto' | కనిపించే వరుసలనే రెండర్ చేస్తుంది: ఎల్లప్పుడూ, ఎప్పుడూ కాదు, లేదా auto తో పేజీలు లేనప్పుడు 100 వరుసలు దాటాక. |
heightఇన్పుట్ | string | గ్రిడ్ ఎత్తును పరిమితం చేసే CSS పొడవు; లోపల స్క్రోల్ అవుతుంది. | |
columnStateటూ-వే | NuiGridColumnState[] | [] | సేవ్ చేసి పునరుద్ధరించడానికి, ప్రతి కాలమ్ వెడల్పు, క్రమం, పిన్, కనిపించే స్థితి. |
modeఇన్పుట్ | 'client' | 'server' | 'client' | server వరుసలను వచ్చినట్టే చూపిస్తుంది; సార్టింగ్, ఫిల్టరింగ్, పేజింగ్ మీకే వదిలేస్తుంది. |
totalఇన్పుట్ | number | సర్వర్లో ఉన్న వరుసల సంఖ్య. | |
loadingఇన్పుట్ | boolean | false | ప్రోగ్రెస్ బార్ను, వరుసలు లేనంతసేపు ప్లేస్హోల్డర్ వరుసలను చూపిస్తుంది. |
localeఇన్పుట్ | string | LOCALE_ID | సంఖ్యలను, తేదీలను ఫార్మాట్ చేస్తుంది; టైప్ చేసిన సంఖ్యలను చదువుతుంది. |
labelsఇన్పుట్ | Partial<NuiGridLabels> | అనువదించడానికి, గ్రిడ్ చూపించే లేదా ప్రకటించే ప్రతి టెక్స్ట్. | |
cornersఇన్పుట్ | NuiCorners | దీని మూలల ఆకారం: round, squircle, bevel, scoop, notch లేదా square. | |
radiusఇన్పుట్ | NuiRadius | దీని మూలలు ఎంత పెద్దవి: none, small, medium, large లేదా full. | |
densityఇన్పుట్ | NuiDensity | ఇది ఎంత స్థలం తీసుకుంటుంది: compact, regular లేదా roomy. | |
rowActivateఅవుట్పుట్ | T | Enter తో లేదా డబుల్ క్లిక్తో తెరిచిన వరుసను ఎమిట్ చేస్తుంది. | |
cellEditఅవుట్పుట్ | NuiGridEdit<T> | ఖరారైన ప్రతి ఎడిట్ను ఎమిట్ చేస్తుంది. | |
queryChangeఅవుట్పుట్ | NuiGridQuery | సార్ట్, ఫిల్టర్లు, శోధన, పేజీ మారిన ప్రతిసారీ వాటిని ఎమిట్ చేస్తుంది. | |
exportCsvమెథడ్ | (options?) => string | కనిపించే కాలమ్లలోని ఫిల్టర్, సార్ట్ అయిన వరుసలు, CSV గా. | |
focusCellమెథడ్ | (row: number, col: number) => void | సెల్కు ఫోకస్ ఇస్తుంది; వరుస -1 అంటే హెడర్. | |
clearFiltersమెథడ్ | () => void | అన్ని ఫిల్టర్లను, శోధనను క్లియర్ చేస్తుంది. |
మీరు సెట్ చేయని కస్టమైజేషన్ ఇన్పుట్లు అత్యంత సమీపంలోని data-nui-* అట్రిబ్యూట్ను అనుసరిస్తాయి. కస్టమైజేషన్ గైడ్ చూడండి.
NuiGridColumn
ఒక కాలమ్. id, header మాత్రమే తప్పనిసరి.
| పేరు | టైప్ | డిఫాల్ట్ | వివరణ |
|---|---|---|---|
idప్రాపర్టీ | string | ప్రత్యేకమైనది; సార్ట్, ఫిల్టర్లు, కాలమ్ స్థితిలో కీ. | |
headerప్రాపర్టీ | string | హెడర్ టెక్స్ట్. | |
valueప్రాపర్టీ | keyof T | ((row: T) => V) | వరుసలోని ఒక కీ, లేదా వరుసను తీసుకునే ఫంక్షన్. డిఫాల్ట్గా row[id]. | |
typeప్రాపర్టీ | 'text' | 'number' | 'date' | 'boolean' | 'enum' | 'text' | అలైన్మెంట్, సార్ట్, ఫిల్టర్, ఎడిటర్ను నిర్ణయిస్తుంది. |
formatప్రాపర్టీ | Intl options | ((value, row) => string) | సంఖ్యలు, తేదీల కోసం Intl ఆప్షన్లు, లేదా టెక్స్ట్ను తయారు చేసే ఫంక్షన్. | |
optionsప్రాపర్టీ | NuiOption<V>[] | enum కాలమ్ ఆప్షన్లు, NuiOption ఆబ్జెక్ట్లుగా. | |
width, minWidth, maxWidthప్రాపర్టీ | number | పిక్సెల్లలో. | |
flexప్రాపర్టీ | number | మిగిలిన స్థలాన్ని ఇతర flex కాలమ్లతో పంచుకుంటుంది. | |
alignప్రాపర్టీ | 'start' | 'center' | 'end' | డిఫాల్ట్ టైప్ను బట్టి: సంఖ్యలు, తేదీలు చివరి వైపు. | |
pinned, hiddenప్రాపర్టీ | 'start' | 'end', boolean | కాలమ్ ప్రారంభ పిన్, కనిపించే స్థితి. | |
sortable, filterable, resizable, reorderable, hideableప్రాపర్టీ | boolean | true | ప్రతిదాన్నీ false తో ఆఫ్ చేయవచ్చు. |
compareప్రాపర్టీ | (a: V, b: V) => number | కస్టమ్ సార్ట్. | |
editable, validateప్రాపర్టీ | boolean | ((row) => boolean), (value, row) => string | null | సెల్లను ఎడిట్ చేయవచ్చో లేదో, విలువ సరైనది కానప్పుడు ఒక సందేశం. | |
setప్రాపర్టీ | (row: T, value: V) => T | ఎడిట్ అయిన వరుసను తయారు చేస్తుంది. డిఫాల్ట్గా కొత్త విలువతో ఒక కాపీ. |
NuiGridCell
ఒక కాలమ్ సెల్లను గీస్తుంది. కాంటెక్స్ట్లో వరుస, దాని విలువ, టెక్స్ట్ ఉంటాయి.
| పేరు | టైప్ | డిఫాల్ట్ | వివరణ |
|---|---|---|---|
nuiGridCellఇన్పుట్ | string | కాలమ్ id. |
NuiGridHeader
ఒక కాలమ్ హెడర్ను గీస్తుంది.
| పేరు | టైప్ | డిఫాల్ట్ | వివరణ |
|---|---|---|---|
nuiGridHeaderఇన్పుట్ | string | కాలమ్ id. |
NuiGridEmpty
వరుసలు లేనప్పుడు కనిపించేది. ఫిల్టర్లు వాటిని దాచాయో లేదో కాంటెక్స్ట్ చెబుతుంది.