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'`	ફક્ત દેખાતી હરોળ રેન્ડર કરે છે: હંમેશાં, ક્યારેય નહીં, અથવા પેજ વગર 100 હરોળ પછી `auto`.
`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` આપે છે.