React ಗಾಗಿ Data grid API

ಇಂಪೋರ್ಟ್

import-grid.tsx

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

NuiGrid

ನೇಟಿವ್ ಟೇಬಲ್ ಮೇಲೆ ಡೇಟಾ ಗ್ರಿಡ್.

NuiGrid: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`rows`ಪ್ರಾಪ್	`readonly T[]`		ಡೇಟಾ. ಎಡಿಟ್ ತನ್ನ ಸಾಲನ್ನು ಬದಲಾಯಿಸಿ `onRowsChange` ಅನ್ನು ಕರೆಯುತ್ತದೆ; ನೀವು ಮುಂದೆ ನೀಡುವ `rows` ಎಡಿಟ್‌ಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ.
`onRowsChange`ಕಾಲ್‌ಬ್ಯಾಕ್	`(rows: readonly T[]) => void`		ಖಚಿತಪಡಿಸಿದ ಪ್ರತಿ ಎಡಿಟ್‌ನ ನಂತರ ಸಾಲುಗಳೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ.
`columns`ಪ್ರಾಪ್	`NuiGridColumn<T>[]`		ಕಾಲಮ್‌ಗಳು, `NuiGridColumn` ಆಬ್ಜೆಕ್ಟ್‌ಗಳಾಗಿ.
`rowId`ಪ್ರಾಪ್	`(row: T) => unknown`	`row.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`ಸ್ಥಿತಿ	`number`	`0`	ಪ್ರತಿ ಪುಟಕ್ಕೆ ಸಾಲುಗಳು, ಅಥವಾ ಸ್ಕ್ರಾಲ್ ಆಗುವ ಒಂದೇ ಪಟ್ಟಿಗೆ 0.
`page` `defaultPage` `onPageChange`ಸ್ಥಿತಿ	`number`	`0`	ತೋರಿಸುತ್ತಿರುವ ಪುಟ, 0 ರಿಂದ.
`pageSizes`ಪ್ರಾಪ್	`number[]`	`[10, 25, 50, 100]`	ಪೇಜರ್‌ನಲ್ಲಿರುವ ಆಯ್ಕೆಗಳು.
`virtual`ಪ್ರಾಪ್	`boolean \| 'auto'`	`'auto'`	ಕಾಣುವ ಸಾಲುಗಳನ್ನು ಮಾತ್ರ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ: ಯಾವಾಗಲೂ, ಎಂದಿಗೂ ಇಲ್ಲ, ಅಥವಾ `auto` ಆಗಿದ್ದರೆ ಪುಟಗಳಿಲ್ಲದಾಗ 100 ಸಾಲುಗಳ ನಂತರ.
`height`ಪ್ರಾಪ್	`string`		ಗ್ರಿಡ್‌ನ ಎತ್ತರಕ್ಕೆ ಮಿತಿ ಹಾಕುವ CSS ಉದ್ದ; ಅದರೊಳಗೆ ಸ್ಕ್ರಾಲ್ ಆಗುತ್ತದೆ.
`columnState` `defaultColumnState` `onColumnStateChange`ಸ್ಥಿತಿ	`NuiGridColumnState[]`	`[]`	ಉಳಿಸಲು ಮತ್ತು ಮರುಸ್ಥಾಪಿಸಲು, ಪ್ರತಿ ಕಾಲಮ್‌ನ ಅಗಲ, ಕ್ರಮ, ಪಿನ್ ಮತ್ತು ಗೋಚರತೆ.
`mode`ಪ್ರಾಪ್	`'client' \| 'server'`	`'client'`	`server` ಸಾಲುಗಳನ್ನು ಬಂದಂತೆಯೇ ತೋರಿಸುತ್ತದೆ, ಮತ್ತು ವಿಂಗಡಣೆ, ಫಿಲ್ಟರಿಂಗ್, ಪುಟಗಳನ್ನು ನಿಮಗೆ ಬಿಡುತ್ತದೆ.
`total`ಪ್ರಾಪ್	`number`		ಸರ್ವರ್‌ನಲ್ಲಿರುವ ಸಾಲುಗಳ ಸಂಖ್ಯೆ.
`loading`ಪ್ರಾಪ್	`boolean`	`false`	ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ಅನ್ನು, ಮತ್ತು ಸಾಲುಗಳಿಲ್ಲದಾಗ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸಾಲುಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
`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`ಪ್ರಾಪ್	`boolean`	`false`	ಫಿಲ್ಟರ್ ಆದ ಎಲ್ಲಾ ಸಾಲುಗಳ ಮೇಲಿನ ಅಗ್ರಿಗೇಟ್‌ಗಳ ಸಾಲು; ಪಠ್ಯ ಬದಲಾದಾಗ ಕ್ಷಣಕಾಲ ಮಿನುಗುವ ಸೆಲ್‌ಗಳು, ಸ್ಥಿರವಾದ `rowId` ಇರುವ ಸಾಲುಗಳಲ್ಲಿ.
`layout`ಪ್ರಾಪ್	`'table' \| 'list' \| 'auto'`	`'table'`	`list` ಸಾಲುಗಳನ್ನು ಕಾರ್ಡ್‌ಗಳಾಗಿ ತೋರಿಸುತ್ತದೆ, ಮತ್ತು `auto` ಕಿರಿದಾದ ಪರದೆಗಳಲ್ಲಿ ಹಾಗೆ ತೋರಿಸುತ್ತದೆ.
`toolbar`ಪ್ರಾಪ್	`boolean \| 'auto'`	`'auto'`	ಸಾಲುಗಳನ್ನು ವಿಂಗಡಿಸುವ, ಫಿಲ್ಟರ್ ಮಾಡುವ ಮತ್ತು ಎಲ್ಲವನ್ನೂ ಆರಿಸುವ ಬಾರ್: ಯಾವಾಗಲೂ, ಎಂದಿಗೂ ಇಲ್ಲ, ಅಥವಾ `auto` ಆಗಿದ್ದರೆ ಕಾರ್ಡ್‌ಗಳೊಂದಿಗೆ.
`renderEmpty`ರೆಂಡರ್ ಪ್ರಾಪ್	`(filtered: boolean) => ReactNode`		ಸಾಲುಗಳಿಲ್ಲದಾಗ ಕಾಣುವುದು; ಫಿಲ್ಟರ್‌ಗಳು ಅವನ್ನು ಮರೆಮಾಡಿವೆಯೇ ಎಂದು ಅದಕ್ಕೆ ತಿಳಿಸಲಾಗುತ್ತದೆ.
`renderDetail`ರೆಂಡರ್ ಪ್ರಾಪ್	`(row: T) => ReactNode`		ಸಾಲಿನ ವಿವರಗಳು, ತೆರೆದಾಗ ಅದರ ಕೆಳಗೆ ಕಾಣುತ್ತವೆ. ಗ್ರಿಡ್ ಟಾಗಲ್‌ಗಳ ಒಂದು ಕಾಲಮ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
`onRowActivate`ಕಾಲ್‌ಬ್ಯಾಕ್	`(row: T) => void`		Enter ಅಥವಾ ಡಬಲ್ ಕ್ಲಿಕ್‌ನಿಂದ ತೆರೆದ ಸಾಲಿನೊಂದಿಗೆ ಕರೆಯಲಾಗುತ್ತದೆ.
`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 ಮಾತ್ರ ಕಡ್ಡಾಯ), ಅದನ್ನು ಬಿಡಿಸುವ ಈ ಎರಡನ್ನೂ ಸ್ವೀಕರಿಸುತ್ತದೆ.

NuiGridColumn: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`renderCell`ರೆಂಡರ್ ಪ್ರಾಪ್	`({ row, value, text, column }) => ReactNode`		ಸಾಲು, ಅದರ ಮೌಲ್ಯ ಮತ್ತು ಪಠ್ಯದಿಂದ ಕಾಲಮ್‌ನ ಸೆಲ್‌ಗಳನ್ನು ನೀವೇ ಬಿಡಿಸುತ್ತೀರಿ.
`renderHeader`ರೆಂಡರ್ ಪ್ರಾಪ್	`(column) => ReactNode`		ಕಾಲಮ್‌ನ ಹೆಡರ್ ಅನ್ನು ನೀವೇ ಬಿಡಿಸುತ್ತೀರಿ; ಅದರ ಹೆಸರು ಈಗಲೂ `header` ನಿಂದಲೇ ಬರುತ್ತದೆ.