API na Data grid don React

Shigo da shi

import-grid.tsx

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

NuiGrid

Data grid a kan tebur na asali.

NuiGrid: Kadarori
Suna	Iri	Na asali	Bayani
`rows`Prop	`readonly T[]`		Bayanan. Gyara yana maye gurbin layinsa kuma yana kiran `onRowsChange`; `rows` na gaba da kuka bayar suna maye gurbin gyare-gyaren.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Ana kiransa da layukan bayan kowane gyaran da aka tabbatar.
`columns`Prop	`NuiGridColumn<T>[]`		Ginshiƙan, a matsayin objects na `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Key na layi, don zaɓi da bibiya.
`label`Prop	`string`		Sunan da ake sanarwa na grid ɗin.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Ko ana iya zaɓar layuka, da guda nawa.
`selected` `defaultSelected` `onSelectedChange`Yanayi	`unknown[]`	`[]`	Keys na layukan da aka zaɓa.
`sort` `defaultSort` `onSortChange`Yanayi	`NuiGridSort[]`	`[]`	Jerawar, a matsayin objects na `{ column, direction }`; na farko ne ke da fifiko.
`filters` `defaultFilters` `onFiltersChange`Yanayi	`Record<string, NuiGridFilter>`	`{}`	Tacewa ɗaya ga kowane id na ginshiƙi: operator da ƙima.
`search` `defaultSearch` `onSearchChange`Yanayi	`string`	`''`	Kalmomin da dole ne duka su kasance a cikin layi.
`pageSize` `defaultPageSize` `onPageSizeChange`Yanayi	`number`	`0`	Layuka a kowane shafi, ko 0 don jeri ɗaya mai gungurawa.
`page` `defaultPage` `onPageChange`Yanayi	`number`	`0`	Shafin da ake nunawa, daga 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Zaɓuɓɓukan da ke cikin pager.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Yana nuna layukan da ake gani kawai: koyaushe, ba ko kaɗan, ko `auto` idan layuka sun wuce 100 ba tare da shafuka ba.
`height`Prop	`string`		Tsawon CSS da ke iyakance grid ɗin; yana gungurawa a ciki.
`columnState` `defaultColumnState` `onColumnStateChange`Yanayi	`NuiGridColumnState[]`	`[]`	Faɗi, matsayi, kafewa da bayyanar kowane ginshiƙi, don adanawa da maidowa.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` yana nuna layuka yadda suke zuwa, kuma yana bar muku jerawa, tacewa da raba shafuka.
`total`Prop	`number`		Yawan layuka a server.
`loading`Prop	`boolean`	`false`	Yana nuna sandar ci gaba, da layukan riƙe wuri idan babu layuka.
`locale`Prop	`string`	`'en-US'`	Yana tsara lambobi da kwanan wata, kuma yana karanta lambobin da aka rubuta.
`labels`Prop	`Partial<NuiGridLabels>`		Kowane rubutu da grid ɗin ke nunawa ko sanarwa, don fassarawa.
`corners`Prop	`NuiCorners`		Siffar kusurwoyinsa: `round`, `squircle`, `bevel`, `scoop`, `notch` ko `square`.
`radius`Prop	`NuiRadius`		Girman kusurwoyinsa: `none`, `small`, `medium`, `large` ko `full`.
`density`Prop	`NuiDensity`		Yawan sararin da yake ɗauka: `compact`, `regular` ko `roomy`.
`groupBy`Prop	`string[]`	`[]`	Ginshiƙan da ake rukunta layuka bisa su, na waje da farko.
`collapsed` `defaultCollapsed` `onCollapsedChange`Yanayi	`string[]`	`[]`	Keys na rukunonin da ke rufe; rukunoni suna farawa a buɗe.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Layukan da ke ƙarƙashin wani layi: grid ɗin yana nuna bayanai masu tsarin bishiya.
`expanded` `defaultExpanded` `onExpandedChange`Yanayi	`unknown[]`	`[]`	Keys na layukan da ke buɗe a bayanai masu tsarin bishiya; suna farawa a rufe.
`details` `defaultDetails` `onDetailsChange`Yanayi	`unknown[]`	`[]`	Keys na layukan da cikakken bayaninsu ke buɗe.
`totals, flash`Prop	`boolean`	`false`	Layin aggregates a kan dukan layukan da aka tace; cells masu walƙiya idan rubutunsu ya canza, a layukan da ke da `rowId` mai ɗorewa.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` yana nuna layuka a matsayin katuna, `auto` kuma yana yin haka a ƙananan allo.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Sanda da ke jera layuka, tana tace su, kuma tana zaɓar dukansu: koyaushe, ba ko kaɗan, ko `auto` tare da katuna.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Abin da ake nunawa idan babu layuka; ana gaya masa ko tacewa ce ta ɓoye su.
`renderDetail`Render prop	`(row: T) => ReactNode`		Cikakken bayanin layi, ana nuna shi a ƙarƙashinsa idan an buɗe. Grid ɗin yana ƙara ginshiƙin toggles.
`onRowActivate`Callback	`(row: T) => void`		Ana kiransa da layin da aka buɗe da Enter ko danna sau biyu.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Ana kiransa da kowane gyaran da aka tabbatar.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Ana kiransa da jerawa, tacewa, bincike da shafi duk lokacin da suka canza, da kuma sau ɗaya a farko.
`ref`Prop	`Ref<NuiGridHandle>`		Abin da `ref` na grid ɗin ke kaiwa: fitarwa, bugawa da focus.
`exportXlsx, print`Method	`(options?) => Blob, () => void`		Layukan da aka tace aka jera a matsayin spreadsheet; yana buga kowane layi.
`exportCsv`Method	`(options?) => string`		Layukan da aka tace aka jera na ginshiƙan da ake gani, a matsayin CSV.
`expandAll`Method	`(open?: boolean) => void`		Yana buɗe kowane rukuni da kowane layi mai layuka a ƙarƙashinsa, ko ya rufe su duka.
`focusCell`Method	`(row: number, col: number) => void`		Yana kai focus kan cell; layi `-1` shi ne layin take.
`clearFilters`Method	`() => void`		Yana share kowace tacewa da binciken.
`fit`Method	`(id: string) => void`		Yana daidaita faɗin ginshiƙi da cell ɗinsa mafi faɗi daga cikin waɗanda aka nuna.

Yanayi yana aiki kamar inputs na React da kansu: ku ba da ƙima, ku sabunta ta daga callback ɗinta na on…Change, ko ku ba da ƙimar default…, ku bar component ɗin ya riƙe ta.

Props na keɓancewa da ba ku saita ba suna bin attribute na data-nui-* mafi kusa. Ku duba jagorar keɓancewa.

NuiGridColumn

Ginshiƙi ɗaya. Yana karɓar dukan kadarorin ginshiƙin Angular (id da header kaɗai ake buƙata), da kuma waɗannan biyun da ke zana shi.

NuiGridColumn: Kadarori
Suna	Iri	Na asali	Bayani
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Ku zana cells na ginshiƙin da kanku, daga layin, ƙimarsa da rubutunsa.
`renderHeader`Render prop	`(column) => ReactNode`		Ku zana taken ginshiƙin da kanku; `header` ne har yanzu ke ba shi suna.