API Grid data kanggo React

Import

import-grid.tsx

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

NuiGrid

Grid data ing tabel native.

NuiGrid: Properti
Jeneng	Jinis	Gawan	Katrangan
`rows`Prop	`readonly T[]`		Data. Suntingan ngganti barise lan nyeluk `onRowsChange`; `rows` sabanjure sing panjenengan wenehake bakal ngganti suntingan kasebut.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Diceluk karo baris-baris sawise saben suntingan sing wis ditetepake.
`columns`Prop	`NuiGridColumn<T>[]`		Kolom-kolom, minangka obyek `NuiGridColumn`.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Kunci baris, kanggo milih lan nglacak.
`label`Prop	`string`		Jeneng aksesibel grid.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Apa baris bisa dipilih, lan pira.
`selected` `defaultSelected` `onSelectedChange`Kahanan	`unknown[]`	`[]`	Kunci baris-baris sing dipilih.
`sort` `defaultSort` `onSortChange`Kahanan	`NuiGridSort[]`	`[]`	Urutan, minangka obyek `{ column, direction }`; sing kapisan ngurutake dhisik.
`filters` `defaultFilters` `onFiltersChange`Kahanan	`Record<string, NuiGridFilter>`	`{}`	Saringan saben id kolom: operator lan nilai.
`search` `defaultSearch` `onSearchChange`Kahanan	`string`	`''`	Tembung-tembung sing kabeh kudu ana ing baris.
`pageSize` `defaultPageSize` `onPageSizeChange`Kahanan	`number`	`0`	Baris saben kaca, utawa 0 kanggo siji dhaptar sing digulung.
`page` `defaultPage` `onPageChange`Kahanan	`number`	`0`	Kaca sing ditampilake, wiwit 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Pilihan ing navigasi kaca.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Mung nggambar baris sing katon: tansah, ora tau, utawa kanthi `auto` yen luwih saka 100 baris tanpa kaca.
`height`Prop	`string`		Dawa CSS sing mbatesi grid; isine digulung ing njero.
`columnState` `defaultColumnState` `onColumnStateChange`Kahanan	`NuiGridColumnState[]`	`[]`	Ambane, urutan, status semat lan visibilitas saben kolom, kanggo disimpen lan dibalekake.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` nampilake baris kaya tekane lan masrahake urutan, saringan lan kaca marang panjenengan.
`total`Prop	`number`		Cacahe baris ing server.
`loading`Prop	`boolean`	`false`	Nampilake bar progres, lan baris placeholder nalika durung ana baris.
`locale`Prop	`string`	`'en-US'`	Ngformat angka lan tanggal, lan maca angka sing diketik.
`labels`Prop	`Partial<NuiGridLabels>`		Saben teks sing ditampilake utawa diumumake grid, kanggo diterjemahake.
`corners`Prop	`NuiCorners`		Wangun pojoke: `round`, `squircle`, `bevel`, `scoop`, `notch` utawa `square`.
`radius`Prop	`NuiRadius`		Sepira gedhene pojoke: `none`, `small`, `medium`, `large` utawa `full`.
`density`Prop	`NuiDensity`		Sepira akehe papan sing dienggo: `compact`, `regular` utawa `roomy`.
`groupBy`Prop	`string[]`	`[]`	Kolom kanggo nglompokake baris, sing paling njaba dhisik.
`collapsed` `defaultCollapsed` `onCollapsedChange`Kahanan	`string[]`	`[]`	Kunci klompok sing ditutup; klompok wiwitane kabukak.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Baris anak saka sawijining baris: grid nampilake data wit.
`expanded` `defaultExpanded` `onExpandedChange`Kahanan	`unknown[]`	`[]`	Kunci baris sing kabukak ing data wit; wiwitane ditutup.
`details` `defaultDetails` `onDetailsChange`Kahanan	`unknown[]`	`[]`	Kunci baris sing rinciane kabukak.
`totals, flash`Prop	`boolean`	`false`	Baris agregat saka kabeh baris sing wis disaring; sel sing kedhip nalika teks-e owah, ing baris kanthi `rowId` sing tetep.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` nampilake baris minangka kertu, lan `auto` uga mengkono ing layar sing ciut.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Bar sing ngurutake, nyaring lan milih kabeh baris: tansah, ora tau, utawa kanthi `auto` bareng kertu.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Apa sing katon nalika ora ana baris; dikabari apa baris-baris didhelikake saringan.
`renderDetail`Render prop	`(row: T) => ReactNode`		Rincian sawijining baris, katon ing sangisore nalika dibukak. Grid nambahake kolom isi toggle.
`onRowActivate`Callback	`(row: T) => void`		Diceluk karo baris sing dibukak nganggo Enter utawa klik kaping pindho.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Diceluk karo saben suntingan sing wis ditetepake.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Diceluk karo urutan, saringan, panelusuran lan kaca saben ana owah-owahan, lan sepisan ing wiwitan.
`ref`Prop	`Ref<NuiGridHandle>`		Apa sing bisa digayuh liwat `ref` grid: ekspor, nyithak lan fokus.
`exportXlsx, print`Metode	`(options?) => Blob, () => void`		Baris sing wis disaring lan diurutake minangka spreadsheet; nyithak kabeh baris.
`exportCsv`Metode	`(options?) => string`		Baris sing wis disaring lan diurutake saka kolom sing katon, minangka CSV.
`expandAll`Metode	`(open?: boolean) => void`		Mbukak saben klompok lan saben baris sing duwe anak, utawa nutup kabeh.
`focusCell`Metode	`(row: number, col: number) => void`		Mindhah fokus menyang sel; baris `-1` yaiku header.
`clearFilters`Metode	`() => void`		Mbusak kabeh saringan lan panelusuran.
`fit`Metode	`(id: string) => void`		Nyocogake ambane kolom karo sel paling amba sing wis digambar.

Kahanan mlaku kaya input React dhewe: wenehana nilai lan anyarana saka callback on…Change-e, utawa wenehana nilai default… lan komponen sing nyimpen.

Prop kustomisasi sing ora panjenengan setel bakal ngetutake attribute data-nui-* sing paling cedhak. Pirsani pandhuan kustomisasi.

NuiGridColumn

Siji kolom. Nampa kabeh properti kolom Angular (mung id lan header sing wajib), uga rong properti iki sing nggambar kolom kasebut.

NuiGridColumn: Properti
Jeneng	Jinis	Gawan	Katrangan
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Panjenengan nggambar sel-sel kolom dhewe, saka baris, nilaine lan teks-e.
`renderHeader`Render prop	`(column) => ReactNode`		Panjenengan nggambar header kolom dhewe; jenenge tetep saka `header`.