Needless UI

ਕੰਪੋਨੈਂਟ

Data grid

ਕਿੰਨੀਆਂ ਵੀ ਕਤਾਰਾਂ ਨੂੰ ਸੌਰਟ, ਫ਼ਿਲਟਰ, ਸਮੂਹਬੱਧ, ਐਡਿਟ ਅਤੇ ਐਕਸਪੋਰਟ ਕਰੋ।

ਇੰਪੋਰਟ

import-grid.tsx
import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

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

ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
rowsਪ੍ਰਾਪreadonly T[]ਡਾਟਾ। ਐਡਿਟ ਆਪਣੀ ਕਤਾਰ ਨੂੰ ਬਦਲਦਾ ਹੈ ਅਤੇ onRowsChange ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ; ਤੁਹਾਡੀਆਂ ਦਿੱਤੀਆਂ ਅਗਲੀਆਂ rows ਐਡਿਟਾਂ ਦੀ ਥਾਂ ਲੈ ਲੈਂਦੀਆਂ ਹਨ।
onRowsChangeਕਾਲਬੈਕ(rows: readonly T[]) => voidਲਾਗੂ ਹੋਏ ਹਰ ਐਡਿਟ ਤੋਂ ਬਾਅਦ ਕਤਾਰਾਂ ਨਾਲ ਕਾਲ ਹੁੰਦਾ ਹੈ।
columnsਪ੍ਰਾਪNuiGridColumn<T>[]ਕਾਲਮ, NuiGridColumn ਆਬਜੈਕਟਾਂ ਵਜੋਂ।
rowIdਪ੍ਰਾਪ(row: T) => unknownrow.id ?? rowਕਤਾਰ ਦੀ ਕੁੰਜੀ, ਚੋਣ ਅਤੇ ਟ੍ਰੈਕਿੰਗ ਲਈ।
labelਪ੍ਰਾਪstringਗ੍ਰਿਡ ਦਾ ਪਹੁੰਚਯੋਗ ਨਾਮ।
selectionਪ੍ਰਾਪ'none' | 'single' | 'multiple''none'ਕਤਾਰਾਂ ਚੁਣੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ ਜਾਂ ਨਹੀਂ, ਅਤੇ ਕਿੰਨੀਆਂ।
selected
defaultSelected
onSelectedChangeਸਥਿਤੀ		unknown[][]ਚੁਣੀਆਂ ਕਤਾਰਾਂ ਦੀਆਂ ਕੁੰਜੀਆਂ।
sort
defaultSort
onSortChangeਸਥਿਤੀ		NuiGridSort[][]ਸੌਰਟ, { column, direction } ਆਬਜੈਕਟਾਂ ਵਜੋਂ; ਪਹਿਲਾ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।
filters
defaultFilters
onFiltersChangeਸਥਿਤੀ		Record<string, NuiGridFilter>{}ਹਰ ਕਾਲਮ id ਲਈ ਇੱਕ ਫ਼ਿਲਟਰ: ਇੱਕ ਆਪਰੇਟਰ ਅਤੇ ਇੱਕ ਵੈਲਿਊ।
search
defaultSearch
onSearchChangeਸਥਿਤੀ		string''ਉਹ ਸ਼ਬਦ, ਜੋ ਸਾਰੇ ਕਤਾਰ ਵਿੱਚ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ।
pageSize
defaultPageSize
onPageSizeChangeਸਥਿਤੀ		number0ਹਰ ਪੰਨੇ ’ਤੇ ਕਤਾਰਾਂ, ਜਾਂ ਇੱਕੋ ਸਕ੍ਰੋਲ ਹੋਣ ਵਾਲੀ ਸੂਚੀ ਲਈ 0।
page
defaultPage
onPageChangeਸਥਿਤੀ		number0ਦਿਖਾਇਆ ਗਿਆ ਪੰਨਾ, 0 ਤੋਂ ਸ਼ੁਰੂ।
pageSizesਪ੍ਰਾਪnumber[][10, 25, 50, 100]ਪੇਜਰ ਦੇ ਵਿਕਲਪ।
virtualਪ੍ਰਾਪboolean | 'auto''auto'ਸਿਰਫ਼ ਦਿਸਦੀਆਂ ਕਤਾਰਾਂ ਰੈਂਡਰ ਕਰਦਾ ਹੈ: ਹਮੇਸ਼ਾ, ਕਦੇ ਨਹੀਂ, ਜਾਂ ਪੰਨਿਆਂ ਤੋਂ ਬਿਨਾਂ 100 ਕਤਾਰਾਂ ਤੋਂ ਬਾਅਦ auto।
heightਪ੍ਰਾਪstringਗ੍ਰਿਡ ਨੂੰ ਸੀਮਤ ਕਰਨ ਵਾਲੀ CSS ਲੰਬਾਈ; ਸਕ੍ਰੋਲ ਅੰਦਰ ਹੁੰਦਾ ਹੈ।
columnState
defaultColumnState
onColumnStateChangeਸਥਿਤੀ		NuiGridColumnState[][]ਹਰ ਕਾਲਮ ਦੀ ਚੌੜਾਈ, ਕ੍ਰਮ, ਪਿੰਨ ਅਤੇ ਦਿੱਖ, ਸੰਭਾਲਣ ਅਤੇ ਮੁੜ ਲਾਗੂ ਕਰਨ ਲਈ।
modeਪ੍ਰਾਪ'client' | 'server''client'server ਕਤਾਰਾਂ ਜਿਵੇਂ ਆਉਂਦੀਆਂ ਹਨ ਉਵੇਂ ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ ਸੌਰਟ, ਫ਼ਿਲਟਰ ਅਤੇ ਪੰਨੇ ਤੁਹਾਡੇ ’ਤੇ ਛੱਡਦਾ ਹੈ।
totalਪ੍ਰਾਪnumberਸਰਵਰ ’ਤੇ ਕਤਾਰਾਂ ਦੀ ਗਿਣਤੀ।
loadingਪ੍ਰਾਪbooleanfalseਪ੍ਰੋਗਰੈੱਸ ਬਾਰ ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ ਕਤਾਰਾਂ ਨਾ ਹੋਣ ’ਤੇ ਪਲੇਸਹੋਲਡਰ ਕਤਾਰਾਂ।
localeਪ੍ਰਾਪstring'en-US'ਸੰਖਿਆਵਾਂ ਅਤੇ ਤਾਰੀਖ਼ਾਂ ਫ਼ਾਰਮੈਟ ਕਰਦਾ ਹੈ, ਅਤੇ ਟਾਈਪ ਕੀਤੀਆਂ ਸੰਖਿਆਵਾਂ ਪੜ੍ਹਦਾ ਹੈ।
labelsਪ੍ਰਾਪPartial<NuiGridLabels>ਗ੍ਰਿਡ ਦਾ ਦਿਖਾਇਆ ਜਾਂ ਐਲਾਨਿਆ ਜਾਣ ਵਾਲਾ ਹਰ ਟੈਕਸਟ, ਅਨੁਵਾਦ ਲਈ।
cornersਪ੍ਰਾਪNuiCornersਇਸ ਦੇ ਕੋਨਿਆਂ ਦੀ ਸ਼ਕਲ: round, squircle, bevel, scoop, notch ਜਾਂ square।
radiusਪ੍ਰਾਪNuiRadiusਇਸ ਦੇ ਕੋਨੇ ਕਿੰਨੇ ਵੱਡੇ ਹੋਣ: none, small, medium, large ਜਾਂ full।
densityਪ੍ਰਾਪNuiDensityਇਹ ਕਿੰਨੀ ਥਾਂ ਲੈਂਦਾ ਹੈ: compact, regular ਜਾਂ roomy।
groupByਪ੍ਰਾਪstring[][]ਉਹ ਕਾਲਮ ਜਿਨ੍ਹਾਂ ਮੁਤਾਬਕ ਕਤਾਰਾਂ ਦੇ ਸਮੂਹ ਬਣਦੇ ਹਨ, ਸਭ ਤੋਂ ਬਾਹਰਲਾ ਪਹਿਲਾਂ।
collapsed
defaultCollapsed
onCollapsedChangeਸਥਿਤੀ		string[][]ਬੰਦ ਸਮੂਹਾਂ ਦੀਆਂ ਕੁੰਜੀਆਂ; ਸ਼ੁਰੂ ਵਿੱਚ ਸਮੂਹ ਖੁੱਲ੍ਹੇ ਹੁੰਦੇ ਹਨ।
getChildrenਪ੍ਰਾਪ(row: T) => T[] | undefinedਕਿਸੇ ਕਤਾਰ ਦੀਆਂ ਉਪ-ਕਤਾਰਾਂ: ਇਨ੍ਹਾਂ ਨਾਲ ਗ੍ਰਿਡ ਟ੍ਰੀ ਡਾਟਾ ਦਿਖਾਉਂਦਾ ਹੈ।
expanded
defaultExpanded
onExpandedChangeਸਥਿਤੀ		unknown[][]ਟ੍ਰੀ ਡਾਟਾ ਵਿੱਚ ਖੁੱਲ੍ਹੀਆਂ ਕਤਾਰਾਂ ਦੀਆਂ ਕੁੰਜੀਆਂ; ਸ਼ੁਰੂ ਵਿੱਚ ਇਹ ਬੰਦ ਹੁੰਦੀਆਂ ਹਨ।
details
defaultDetails
onDetailsChangeਸਥਿਤੀ		unknown[][]ਉਨ੍ਹਾਂ ਕਤਾਰਾਂ ਦੀਆਂ ਕੁੰਜੀਆਂ, ਜਿਨ੍ਹਾਂ ਦੇ ਵੇਰਵੇ ਖੁੱਲ੍ਹੇ ਹਨ।
totals, flashਪ੍ਰਾਪbooleanfalseਫ਼ਿਲਟਰ ਹੋਈਆਂ ਸਾਰੀਆਂ ਕਤਾਰਾਂ ’ਤੇ ਐਗਰੀਗੇਟਾਂ ਦੀ ਇੱਕ ਕਤਾਰ; ਅਤੇ ਉਹ ਸੈੱਲ ਜੋ ਟੈਕਸਟ ਬਦਲਣ ’ਤੇ ਪਲ ਭਰ ਲਈ ਚਮਕਦੇ ਹਨ, ਸਥਾਈ rowId ਵਾਲੀਆਂ ਕਤਾਰਾਂ ਵਿੱਚ।
layoutਪ੍ਰਾਪ'table' | 'list' | 'auto''table'list ਕਤਾਰਾਂ ਨੂੰ ਕਾਰਡਾਂ ਵਜੋਂ ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ auto ਤੰਗ ਸਕ੍ਰੀਨਾਂ ’ਤੇ ਇਹੀ ਕਰਦਾ ਹੈ।
toolbarਪ੍ਰਾਪboolean | 'auto''auto'ਕਤਾਰਾਂ ਨੂੰ ਸੌਰਟ ਤੇ ਫ਼ਿਲਟਰ ਕਰਨ ਅਤੇ ਸਾਰੀਆਂ ਕਤਾਰਾਂ ਚੁਣਨ ਵਾਲਾ ਬਾਰ: ਹਮੇਸ਼ਾ, ਕਦੇ ਨਹੀਂ, ਜਾਂ ਕਾਰਡਾਂ ਨਾਲ auto।
renderEmptyਰੈਂਡਰ ਪ੍ਰਾਪ(filtered: boolean) => ReactNodeਕੋਈ ਕਤਾਰ ਨਾ ਹੋਣ ’ਤੇ ਜੋ ਦਿਸਦਾ ਹੈ; ਇਸ ਨੂੰ ਦੱਸਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਕੀ ਫ਼ਿਲਟਰਾਂ ਨੇ ਉਨ੍ਹਾਂ ਨੂੰ ਲੁਕਾਇਆ ਹੈ।
renderDetailਰੈਂਡਰ ਪ੍ਰਾਪ(row: T) => ReactNodeਕਤਾਰ ਦੇ ਵੇਰਵੇ, ਜੋ ਖੋਲ੍ਹਣ ’ਤੇ ਉਸ ਦੇ ਹੇਠਾਂ ਦਿਸਦੇ ਹਨ। ਗ੍ਰਿਡ ਟੌਗਲਾਂ ਦਾ ਇੱਕ ਕਾਲਮ ਜੋੜਦਾ ਹੈ।
onRowActivateਕਾਲਬੈਕ(row: T) => voidEnter ਜਾਂ ਡਬਲ-ਕਲਿੱਕ ਨਾਲ ਖੋਲ੍ਹੀ ਕਤਾਰ ਨਾਲ ਕਾਲ ਹੁੰਦਾ ਹੈ।
onCellEditਕਾਲਬੈਕ(edit: NuiGridEdit<T>) => voidਲਾਗੂ ਹੋਏ ਹਰ ਐਡਿਟ ਨਾਲ ਕਾਲ ਹੁੰਦਾ ਹੈ।
onQueryChangeਕਾਲਬੈਕ(query: NuiGridQuery) => voidਸੌਰਟ, ਫ਼ਿਲਟਰ, ਖੋਜ ਅਤੇ ਪੰਨਾ ਬਦਲਦੇ ਹੀ ਉਨ੍ਹਾਂ ਨਾਲ ਕਾਲ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸ਼ੁਰੂ ਵਿੱਚ ਇੱਕ ਵਾਰ ਵੀ।
refਪ੍ਰਾਪRef<NuiGridHandle>ਗ੍ਰਿਡ ਦੇ ref ਤੋਂ ਜੋ ਮਿਲਦਾ ਹੈ: ਐਕਸਪੋਰਟ, ਪ੍ਰਿੰਟ ਅਤੇ ਫ਼ੋਕਸ।
exportXlsx, printਮੈਥਡ(options?) => Blob, () => voidਫ਼ਿਲਟਰ ਅਤੇ ਸੌਰਟ ਕੀਤੀਆਂ ਕਤਾਰਾਂ, ਸਪ੍ਰੈੱਡਸ਼ੀਟ ਵਜੋਂ; ਹਰ ਕਤਾਰ ਪ੍ਰਿੰਟ ਕਰਦਾ ਹੈ।
exportCsvਮੈਥਡ(options?) => stringਦਿਸਦੇ ਕਾਲਮਾਂ ਦੀਆਂ ਫ਼ਿਲਟਰ ਅਤੇ ਸੌਰਟ ਕੀਤੀਆਂ ਕਤਾਰਾਂ, CSV ਵਜੋਂ।
expandAllਮੈਥਡ(open?: boolean) => voidਹਰ ਸਮੂਹ ਅਤੇ ਉਪ-ਕਤਾਰਾਂ ਵਾਲੀ ਹਰ ਕਤਾਰ ਖੋਲ੍ਹਦਾ ਹੈ, ਜਾਂ ਸਭ ਨੂੰ ਬੰਦ ਕਰਦਾ ਹੈ।
focusCellਮੈਥਡ(row: number, col: number) => voidਕਿਸੇ ਸੈੱਲ ’ਤੇ ਫ਼ੋਕਸ ਕਰਦਾ ਹੈ; ਕਤਾਰ -1 ਹੈਡਰ ਹੈ।
clearFiltersਮੈਥਡ() => voidਸਾਰੇ ਫ਼ਿਲਟਰ ਅਤੇ ਖੋਜ ਸਾਫ਼ ਕਰਦਾ ਹੈ।
fitਮੈਥਡ(id: string) => voidਕਾਲਮ ਨੂੰ ਉਸ ਦੇ ਰੈਂਡਰ ਹੋਏ ਸੈੱਲਾਂ ਵਿੱਚੋਂ ਸਭ ਤੋਂ ਚੌੜੇ ਸੈੱਲ ਮੁਤਾਬਕ ਫ਼ਿੱਟ ਕਰਦਾ ਹੈ।

ਸਥਿਤੀ React ਦੇ ਆਪਣੇ ਇਨਪੁੱਟਾਂ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ: ਵੈਲਿਊ ਦਿਓ ਅਤੇ ਉਸ ਨੂੰ ਉਸ ਦੇ on…Change ਕਾਲਬੈਕ ਤੋਂ ਅੱਪਡੇਟ ਕਰੋ, ਜਾਂ default… ਵੈਲਿਊ ਦਿਓ ਅਤੇ ਉਸ ਨੂੰ ਕੰਪੋਨੈਂਟ ’ਤੇ ਛੱਡ ਦਿਓ।

ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਦੇ ਜੋ ਪ੍ਰਾਪ ਤੁਸੀਂ ਸੈੱਟ ਨਹੀਂ ਕਰਦੇ, ਉਹ ਸਭ ਤੋਂ ਨੇੜਲੇ data-nui-* ਐਟਰੀਬਿਊਟ ਤੋਂ ਵੈਲਿਊ ਲੈਂਦੇ ਹਨ। ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਗਾਈਡ ਵੇਖੋ।

NuiGridColumn

ਇੱਕ ਕਾਲਮ। ਇਹ Angular ਕਾਲਮ ਦੀ ਹਰ ਪ੍ਰਾਪਰਟੀ ਲੈਂਦਾ ਹੈ (ਸਿਰਫ਼ id ਅਤੇ header ਲਾਜ਼ਮੀ ਹਨ), ਅਤੇ ਇਹ ਦੋ ਵੀ, ਜੋ ਇਸ ਨੂੰ ਬਣਾਉਂਦੀਆਂ ਹਨ।

ਨਾਮਟਾਈਪਡਿਫ਼ਾਲਟਵੇਰਵਾ
renderCellਰੈਂਡਰ ਪ੍ਰਾਪ({ row, value, text, column }) => ReactNodeਕਾਲਮ ਦੇ ਸੈੱਲ ਖ਼ੁਦ ਬਣਾਓ, ਕਤਾਰ, ਸੈੱਲ ਦੀ ਵੈਲਿਊ ਅਤੇ ਟੈਕਸਟ ਤੋਂ।
renderHeaderਰੈਂਡਰ ਪ੍ਰਾਪ(column) => ReactNodeਕਾਲਮ ਦਾ ਹੈਡਰ ਖ਼ੁਦ ਬਣਾਓ; ਉਸ ਦਾ ਨਾਮ ਫਿਰ ਵੀ header ਤੋਂ ਆਉਂਦਾ ਹੈ।