Needless UI

ਕੰਪੋਨੈਂਟ

Data grid

ਕਿੰਨੀਆਂ ਵੀ ਕਤਾਰਾਂ ਨੂੰ ਸੌਰਟ, ਫ਼ਿਲਟਰ, ਐਡਿਟ ਅਤੇ ਸਕ੍ਰੋਲ ਕਰੋ, ਅਤੇ ਚੁਣੋ।

ਇੰਪੋਰਟ

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

NuiGrid

ਨੇਟਿਵ ਟੇਬਲ ’ਤੇ ਬਣਿਆ ਡਾਟਾ ਗ੍ਰਿਡ।

ਸਿਲੈਕਟਰ
nui-grid
ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
rowsਦੋ-ਪਾਸੜreadonly T[]ਡਾਟਾ। ਐਡਿਟ ਕਤਾਰਾਂ ਨੂੰ ਬਦਲ ਦਿੰਦੇ ਹਨ, ਇਸ ਲਈ [(rows)] ਨਾਲ ਬਾਈਂਡ ਕਰੋ।
columnsਇਨਪੁੱਟNuiGridColumn<T>[]ਕਾਲਮ, NuiGridColumn ਆਬਜੈਕਟਾਂ ਵਜੋਂ।
rowIdਇਨਪੁੱਟ(row: T) => unknownrow.id ?? rowਕਤਾਰ ਦੀ ਕੁੰਜੀ, ਚੋਣ ਅਤੇ ਟ੍ਰੈਕਿੰਗ ਲਈ।
labelਇਨਪੁੱਟstringਗ੍ਰਿਡ ਦਾ ਪਹੁੰਚਯੋਗ ਨਾਮ।
selectionਇਨਪੁੱਟ'none' | 'single' | 'multiple''none'ਕਤਾਰਾਂ ਚੁਣੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ ਜਾਂ ਨਹੀਂ, ਅਤੇ ਕਿੰਨੀਆਂ।
selectedਦੋ-ਪਾਸੜunknown[][]ਚੁਣੀਆਂ ਕਤਾਰਾਂ ਦੀਆਂ ਕੁੰਜੀਆਂ।
sortਦੋ-ਪਾਸੜNuiGridSort[][]ਸੌਰਟ, { column, direction } ਆਬਜੈਕਟਾਂ ਵਜੋਂ; ਪਹਿਲਾ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।
filtersਦੋ-ਪਾਸੜRecord<string, NuiGridFilter>{}ਹਰ ਕਾਲਮ id ਲਈ ਇੱਕ ਫ਼ਿਲਟਰ: ਇੱਕ ਆਪਰੇਟਰ ਅਤੇ ਇੱਕ ਵੈਲਿਊ।
searchਦੋ-ਪਾਸੜstring''ਉਹ ਸ਼ਬਦ, ਜੋ ਸਾਰੇ ਕਤਾਰ ਵਿੱਚ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ।
pageSizeਦੋ-ਪਾਸੜnumber0ਹਰ ਪੰਨੇ ’ਤੇ ਕਤਾਰਾਂ, ਜਾਂ ਇੱਕੋ ਸਕ੍ਰੋਲ ਹੋਣ ਵਾਲੀ ਸੂਚੀ ਲਈ 0।
pageਦੋ-ਪਾਸੜnumber0ਦਿਖਾਇਆ ਗਿਆ ਪੰਨਾ, 0 ਤੋਂ ਸ਼ੁਰੂ।
pageSizesਇਨਪੁੱਟnumber[][10, 25, 50, 100]ਪੇਜਰ ਦੇ ਵਿਕਲਪ।
virtualਇਨਪੁੱਟboolean | 'auto''auto'ਸਿਰਫ਼ ਦਿਸਦੀਆਂ ਕਤਾਰਾਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ: ਹਮੇਸ਼ਾ, ਕਦੇ ਨਹੀਂ, ਜਾਂ ਪੰਨਿਆਂ ਤੋਂ ਬਿਨਾਂ 100 ਕਤਾਰਾਂ ਤੋਂ ਬਾਅਦ auto।
heightਇਨਪੁੱਟstringਗ੍ਰਿਡ ਨੂੰ ਸੀਮਤ ਕਰਨ ਵਾਲੀ CSS ਲੰਬਾਈ; ਸਕ੍ਰੋਲ ਅੰਦਰ ਹੁੰਦਾ ਹੈ।
columnStateਦੋ-ਪਾਸੜNuiGridColumnState[][]ਹਰ ਕਾਲਮ ਦੀ ਚੌੜਾਈ, ਕ੍ਰਮ, ਪਿੰਨ ਅਤੇ ਦਿੱਖ, ਸੰਭਾਲਣ ਅਤੇ ਮੁੜ ਲਾਗੂ ਕਰਨ ਲਈ।
modeਇਨਪੁੱਟ'client' | 'server''client'server ਕਤਾਰਾਂ ਜਿਵੇਂ ਆਉਂਦੀਆਂ ਹਨ ਉਵੇਂ ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ ਸੌਰਟ, ਫ਼ਿਲਟਰ ਅਤੇ ਪੰਨੇ ਤੁਹਾਡੇ ’ਤੇ ਛੱਡਦਾ ਹੈ।
totalਇਨਪੁੱਟnumberਸਰਵਰ ’ਤੇ ਕਤਾਰਾਂ ਦੀ ਗਿਣਤੀ।
loadingਇਨਪੁੱਟbooleanfalseਪ੍ਰੋਗਰੈੱਸ ਬਾਰ ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ ਕਤਾਰਾਂ ਨਾ ਹੋਣ ’ਤੇ ਪਲੇਸਹੋਲਡਰ ਕਤਾਰਾਂ।
localeਇਨਪੁੱਟstringLOCALE_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ਆਊਟਪੁੱਟTEnter ਜਾਂ ਡਬਲ-ਕਲਿੱਕ ਨਾਲ ਖੋਲ੍ਹੀ ਕਤਾਰ ਐਮਿਟ ਕਰਦਾ ਹੈ।
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ਪ੍ਰਾਪਰਟੀbooleantrueਹਰ ਇੱਕ ਨੂੰ false ਨਾਲ ਬੰਦ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
compareਪ੍ਰਾਪਰਟੀ(a: V, b: V) => numberਕਸਟਮ ਸੌਰਟ।
editable, validateਪ੍ਰਾਪਰਟੀboolean | ((row) => boolean), (value, row) => string | nullਸੈੱਲ ਐਡਿਟ ਹੋ ਸਕਦੇ ਹਨ ਜਾਂ ਨਹੀਂ, ਅਤੇ ਵੈਲਿਊ ਸਹੀ ਨਾ ਹੋਣ ’ਤੇ ਸੁਨੇਹਾ।
setਪ੍ਰਾਪਰਟੀ(row: T, value: V) => Tਐਡਿਟ ਕੀਤੀ ਕਤਾਰ ਬਣਾਉਂਦਾ ਹੈ। ਡਿਫ਼ਾਲਟ: ਨਵੀਂ ਵੈਲਿਊ ਵਾਲੀ ਕਾਪੀ।

NuiGridCell

ਕਾਲਮ ਦੇ ਸੈੱਲ ਬਣਾਉਂਦਾ ਹੈ। ਕੰਟੈਕਸਟ ਵਿੱਚ ਕਤਾਰ, ਸੈੱਲ ਦੀ ਵੈਲਿਊ ਅਤੇ ਟੈਕਸਟ ਹੁੰਦੇ ਹਨ।

ਸਿਲੈਕਟਰ
ng-template[nuiGridCell]
ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
nuiGridCellਇਨਪੁੱਟstringਕਾਲਮ ਦੀ id।

NuiGridHeader

ਕਾਲਮ ਦਾ ਹੈਡਰ ਬਣਾਉਂਦਾ ਹੈ।

ਸਿਲੈਕਟਰ
ng-template[nuiGridHeader]
ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
nuiGridHeaderਇਨਪੁੱਟstringਕਾਲਮ ਦੀ id।

NuiGridEmpty

ਕੋਈ ਕਤਾਰ ਨਾ ਹੋਣ ’ਤੇ ਜੋ ਦਿਸਦਾ ਹੈ। ਕੰਟੈਕਸਟ ਦੱਸਦਾ ਹੈ ਕਿ ਕੀ ਫ਼ਿਲਟਰਾਂ ਨੇ ਉਨ੍ਹਾਂ ਨੂੰ ਲੁਕਾਇਆ ਹੈ।

ਸਿਲੈਕਟਰ
ng-template[nuiGridEmpty]