ಇಂಪೋರ್ಟ್
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
ಸಾಲುಗಳಿಲ್ಲದಾಗ ಕಾಣುವುದು. ಫಿಲ್ಟರ್ಗಳು ಅವನ್ನು ಮರೆಮಾಡಿವೆಯೇ ಎಂದು ಕಾಂಟೆಕ್ಸ್ಟ್ ತಿಳಿಸುತ್ತದೆ.