API ya Gridi ya data kwa React

Kuingiza

import-grid.tsx

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

NuiGrid

Gridi ya data juu ya jedwali asilia.

NuiGrid: Sifa
Jina	Aina	Chaguomsingi	Maelezo
`rows`Prop	`readonly T[]`		Data. Uhariri hubadilisha safu yake na huita `onRowsChange`; `rows` zinazofuata unazopitisha huchukua nafasi ya mabadiliko hayo.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Huitwa ikipewa safu baada ya kila uhariri uliothibitishwa.
`columns`Prop	`NuiGridColumn<T>[]`		Safu wima, kama vitu vya `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Ufunguo wa safu, kwa uchaguzi na ufuatiliaji.
`label`Prop	`string`		Jina linalofikika la gridi.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Kama safu zinaweza kuchaguliwa, na ngapi.
`selected` `defaultSelected` `onSelectedChange`Hali	`unknown[]`	`[]`	Funguo za safu zilizochaguliwa.
`sort` `defaultSort` `onSortChange`Hali	`NuiGridSort[]`	`[]`	Upangaji, kama vitu vya `{ column, direction }`; cha kwanza hupanga kwanza.
`filters` `defaultFilters` `onFiltersChange`Hali	`Record<string, NuiGridFilter>`	`{}`	Kichujio kwa kila id ya safu wima: opereta na thamani.
`search` `defaultSearch` `onSearchChange`Hali	`string`	`''`	Maneno ambayo yote lazima yawe katika safu.
`pageSize` `defaultPageSize` `onPageSizeChange`Hali	`number`	`0`	Safu kwa kila ukurasa, au 0 kwa orodha moja inayosogezwa.
`page` `defaultPage` `onPageChange`Hali	`number`	`0`	Ukurasa unaoonyeshwa, kuanzia 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Chaguo katika kidhibiti cha kurasa.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Huchora safu zinazoonekana pekee: daima, kamwe, au kwa `auto` safu zikizidi 100 bila kurasa.
`height`Prop	`string`		Urefu wa CSS unaoiwekea gridi kikomo; husogezwa ndani yake.
`columnState` `defaultColumnState` `onColumnStateChange`Hali	`NuiGridColumnState[]`	`[]`	Upana, mpangilio, ubandikaji na uonekano wa kila safu wima, ili kuhifadhi na kurejesha.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` huonyesha safu jinsi zinavyofika na hukuachia upangaji, uchujaji na kurasa.
`total`Prop	`number`		Idadi ya safu kwenye seva.
`loading`Prop	`boolean`	`false`	Huonyesha upau wa maendeleo, na safu za kishika nafasi wakati hakuna safu.
`locale`Prop	`string`	`'en-US'`	Huumbiza namba na tarehe, na husoma namba zilizoandikwa.
`labels`Prop	`Partial<NuiGridLabels>`		Kila maandishi ambayo gridi huonyesha au hutangaza, ili kuyatafsiri.
`corners`Prop	`NuiCorners`		Umbo la pembe zake: `round`, `squircle`, `bevel`, `scoop`, `notch` au `square`.
`radius`Prop	`NuiRadius`		Ukubwa wa pembe zake: `none`, `small`, `medium`, `large` au `full`.
`density`Prop	`NuiDensity`		Nafasi kinayochukua: `compact`, `regular` au `roomy`.
`groupBy`Prop	`string[]`	`[]`	Safu wima za kupanga safu katika makundi, ya nje kabisa kwanza.
`collapsed` `defaultCollapsed` `onCollapsedChange`Hali	`string[]`	`[]`	Funguo za makundi yaliyofungwa; makundi huanza yakiwa wazi.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Safu tanzu za safu: gridi huonyesha data ya mti.
`expanded` `defaultExpanded` `onExpandedChange`Hali	`unknown[]`	`[]`	Funguo za safu zilizo wazi katika data ya mti; huanza zikiwa zimefungwa.
`details` `defaultDetails` `onDetailsChange`Hali	`unknown[]`	`[]`	Funguo za safu ambazo maelezo yake yako wazi.
`totals, flash`Prop	`boolean`	`false`	Safu ya thamani za muhtasari za safu zote zilizochujwa; visanduku vinavyomweka maandishi yake yanapobadilika, katika safu zenye `rowId` ya kudumu.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` huonyesha safu kama kadi, na `auto` hufanya hivyo kwenye skrini nyembamba.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Upau unaopanga na kuchuja safu, na kuzichagua zote: daima, kamwe, au kwa `auto` pamoja na kadi.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Kinachoonyeshwa wakati hakuna safu; huambiwa kama vichujio vimezificha.
`renderDetail`Render prop	`(row: T) => ReactNode`		Maelezo ya safu, yanayoonyeshwa chini yake yakifunguliwa. Gridi huongeza safu wima ya vitufe vya kugeuza.
`onRowActivate`Callback	`(row: T) => void`		Huitwa ikipewa safu iliyofunguliwa kwa Enter au kwa kubofya mara mbili.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Huitwa ikipewa kila uhariri uliothibitishwa.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Huitwa ikipewa upangaji, vichujio, utafutaji na ukurasa kila vinapobadilika, na mara moja mwanzoni.
`ref`Prop	`Ref<NuiGridHandle>`		Kile ambacho `ref` ya gridi hufikia: kuhamisha, kuchapisha na focus.
`exportXlsx, print`Mbinu	`(options?) => Blob, () => void`		Safu zilizochujwa na kupangwa, kama lahajedwali; huchapisha safu zote.
`exportCsv`Mbinu	`(options?) => string`		Safu zilizochujwa na kupangwa, za safu wima zinazoonekana, kama CSV.
`expandAll`Mbinu	`(open?: boolean) => void`		Hufungua kila kundi na kila safu yenye safu tanzu, au huzifunga zote.
`focusCell`Mbinu	`(row: number, col: number) => void`		Huweka focus kwenye kisanduku; safu `-1` ni kichwa.
`clearFilters`Mbinu	`() => void`		Hufuta kila kichujio na utafutaji.
`fit`Mbinu	`(id: string) => void`		Hurekebisha upana wa safu wima ulingane na kisanduku chake kipana zaidi kilichochorwa.

Hali hufanya kazi kama input za React zenyewe: pitisha thamani na uisasishe kutoka callback yake ya on…Change, au pitisha thamani ya default… na uache kijenzi kiihifadhi.

Prop za ubinafsishaji usizoweka hufuata attribute ya data-nui-* iliyo karibu zaidi. Tazama mwongozo wa ubinafsishaji.

NuiGridColumn

Safu wima moja. Hupokea kila sifa ya safu wima ya Angular (ni id na header pekee zinazohitajika), pamoja na hizi mbili zinazoichora.

NuiGridColumn: Sifa
Jina	Aina	Chaguomsingi	Maelezo
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Chora visanduku vya safu wima wewe mwenyewe, kutokana na safu, thamani yake na maandishi yake.
`renderHeader`Render prop	`(column) => ReactNode`		Chora kichwa cha safu wima wewe mwenyewe; `header` bado ndiyo inayokipa jina.