React API ng Data grid · Needless UI

Import

import-grid.tsx

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

NuiGrid

Isang data grid sa native na table.

NuiGrid: Mga property
Pangalan	Uri	Default	Paglalarawan
`rows`Prop	`readonly T[]`		Ang data. Pinapalitan ng isang edit ang row nito at tinatawag ang `onRowsChange`; papalitan ng susunod na `rows` na ipapasa mo ang mga edit.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Tinatawag kasama ang mga row pagkatapos ng bawat na-commit na edit.
`columns`Prop	`NuiGridColumn<T>[]`		Ang mga column, bilang mga `NuiGridColumn` object.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	Key ng isang row, para sa selection at tracking.
`label`Prop	`string`		Accessible name ng grid.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Kung puwedeng pumili ng mga row, at kung ilan.
`selected` `defaultSelected` `onSelectedChange`State	`unknown[]`	`[]`	Mga key ng mga napiling row.
`sort` `defaultSort` `onSortChange`State	`NuiGridSort[]`	`[]`	Ang sort, bilang mga `{ column, direction }` object; nauunang mag-sort ang una.
`filters` `defaultFilters` `onFiltersChange`State	`Record<string, NuiGridFilter>`	`{}`	Isang filter bawat column id: isang operator at isang value.
`search` `defaultSearch` `onSearchChange`State	`string`	`''`	Mga salitang dapat lumabas lahat sa isang row.
`pageSize` `defaultPageSize` `onPageSizeChange`State	`number`	`0`	Mga row bawat page, o 0 para sa iisang listahang nag-i-scroll.
`page` `defaultPage` `onPageChange`State	`number`	`0`	Ang ipinapakitang page, mula 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	Mga pagpipilian sa pager.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Nire-render lang ang mga row na nakikita: palagi, hindi kailanman, o `auto` kapag lampas 100 row nang walang page.
`height`Prop	`string`		Isang CSS length na naglilimita sa grid; sa loob ito nag-i-scroll.
`columnState` `defaultColumnState` `onColumnStateChange`State	`NuiGridColumnState[]`	`[]`	Lapad, pagkakasunod, pin at visibility ng bawat column, para i-save at i-restore.
`mode`Prop	`'client' \| 'server'`	`'client'`	Ipinapakita ng `server` ang mga row kung paano dumating ang mga ito, at ipinapaubaya sa iyo ang sorting, filtering at paging.
`total`Prop	`number`		Bilang ng mga row sa server.
`loading`Prop	`boolean`	`false`	Nagpapakita ng progress bar, at mga placeholder row habang wala pang row.
`locale`Prop	`string`	`'en-US'`	Fino-format ang mga numero at petsa, at binabasa ang mga itinipang numero.
`labels`Prop	`Partial<NuiGridLabels>`		Bawat text na ipinapakita o ina-announce ng grid, para maisalin.
`corners`Prop	`NuiCorners`		Ang hugis ng mga sulok nito: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Prop	`NuiRadius`		Kung gaano kabilog ang mga sulok nito: `none`, `small`, `medium`, `large` o `full`.
`density`Prop	`NuiDensity`		Kung gaano kalaking espasyo ang kinukuha nito: `compact`, `regular` o `roomy`.
`groupBy`Prop	`string[]`	`[]`	Ang mga column kung saan igu-group ang mga row, ang pinakalabas muna.
`collapsed` `defaultCollapsed` `onCollapsedChange`State	`string[]`	`[]`	Mga key ng mga nakasarang grupo; bukas ang mga grupo sa simula.
`getChildren`Prop	`(row: T) => T[] \| undefined`		Ang mga child ng isang row: nagpapakita ng tree data ang grid.
`expanded` `defaultExpanded` `onExpandedChange`State	`unknown[]`	`[]`	Mga key ng mga row na bukas sa tree data; sarado ang mga ito sa simula.
`details` `defaultDetails` `onDetailsChange`State	`unknown[]`	`[]`	Mga key ng mga row na bukas ang mga detalye.
`totals, flash`Prop	`boolean`	`false`	Isang row ng mga aggregate sa bawat na-filter na row; mga cell na kumikislap kapag nagbago ang text nila, sa mga row na may pangmatagalang `rowId`.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	Ipinapakita ng `list` ang mga row bilang mga card, at ginagawa rin ito ng `auto` sa makikitid na screen.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	Isang bar na nagso-sort, nagfi-filter at pumipili ng lahat ng row: palagi, hindi kailanman, o `auto` kasama ng mga card.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		Ang ipinapakita kapag walang row; sinasabi rito kung mga filter ang nagtago sa mga ito.
`renderDetail`Render prop	`(row: T) => ReactNode`		Ang mga detalye ng isang row, na ipinapakita sa ilalim nito kapag binuksan. Nagdadagdag ang grid ng isang column ng mga toggle.
`onRowActivate`Callback	`(row: T) => void`		Tinatawag kasama ang row na binuksan gamit ang Enter o double click.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Tinatawag kasama ang bawat na-commit na edit.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Tinatawag kasama ang sort, mga filter, search at page tuwing nagbabago ang mga ito, at minsan sa simula.
`ref`Prop	`Ref<NuiGridHandle>`		Ang naaabot ng `ref` ng grid: mga export, pag-print at focus.
`exportXlsx, print`Method	`(options?) => Blob, () => void`		Ang mga na-filter at na-sort na row bilang spreadsheet; pini-print ang bawat row.
`exportCsv`Method	`(options?) => string`		Ang mga na-filter at na-sort na row ng mga nakikitang column, bilang CSV.
`expandAll`Method	`(open?: boolean) => void`		Binubuksan ang bawat grupo at bawat row na may mga child, o isinasara silang lahat.
`focusCell`Method	`(row: number, col: number) => void`		Inililipat ang focus sa isang cell; header ang row `-1`.
`clearFilters`Method	`() => void`		Kini-clear ang bawat filter at ang search.
`fit`Method	`(id: string) => void`		Ipinapantay ang lapad ng isang column sa pinakamalapad sa mga nire-render nitong cell.

Gumagana ang state gaya ng mga sariling input ng React: magpasa ng value at i-update ito mula sa on…Change callback nito, o magpasa ng default… na value at hayaang ang component ang mag-ingat nito.

Sinusunod ng mga customization prop na hindi mo sine-set ang pinakamalapit na data-nui-* attribute. Tingnan ang gabay sa pag-customize.

NuiGridColumn

Isang column. Tumatanggap ito ng bawat property ng Angular column (id at header lang ang required), at ng dalawang ito na gumuguhit nito.

NuiGridColumn: Mga property
Pangalan	Uri	Default	Paglalarawan
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Ikaw ang gumuguhit ng mga cell ng column, mula sa row, sa value nito at sa text nito.
`renderHeader`Render prop	`(column) => ReactNode`		Ikaw ang gumuguhit ng header ng column; ang `header` pa rin ang nagbibigay ng pangalan nito.