Data grid API for React

Import

import-grid.tsx

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

NuiGrid

A data grid on a native table.

NuiGrid: Properties
Name	Type	Default	Description
`rows`Prop	`readonly T[]`		The data. An edit replaces its row and calls `onRowsChange`; the next `rows` you pass replace the edits.
`onRowsChange`Callback	`(rows: readonly T[]) => void`		Called with the rows after each committed edit.
`columns`Prop	`NuiGridColumn<T>[]`		The columns, as `NuiGridColumn` objects.
`rowId`Prop	`(row: T) => unknown`	`row.id ?? row`	A row’s key, for selection and tracking.
`label`Prop	`string`		The grid’s accessible name.
`selection`Prop	`'none' \| 'single' \| 'multiple'`	`'none'`	Whether rows can be selected, and how many.
`selected` `defaultSelected` `onSelectedChange`State	`unknown[]`	`[]`	The keys of the selected rows.
`sort` `defaultSort` `onSortChange`State	`NuiGridSort[]`	`[]`	The sort, as `{ column, direction }` objects; the first sorts first.
`filters` `defaultFilters` `onFiltersChange`State	`Record<string, NuiGridFilter>`	`{}`	A filter per column id: an operator and a value.
`search` `defaultSearch` `onSearchChange`State	`string`	`''`	Words that must all appear in a row.
`pageSize` `defaultPageSize` `onPageSizeChange`State	`number`	`0`	Rows per page, or 0 for one scrolling list.
`page` `defaultPage` `onPageChange`State	`number`	`0`	The page shown, from 0.
`pageSizes`Prop	`number[]`	`[10, 25, 50, 100]`	The choices in the pager.
`virtual`Prop	`boolean \| 'auto'`	`'auto'`	Renders only the rows in view: always, never, or `auto` past 100 rows without pages.
`height`Prop	`string`		A CSS length that bounds the grid; it scrolls inside.
`columnState` `defaultColumnState` `onColumnStateChange`State	`NuiGridColumnState[]`	`[]`	Each column’s width, order, pin and visibility, to save and restore.
`mode`Prop	`'client' \| 'server'`	`'client'`	`server` shows rows as they come and leaves sorting, filtering and paging to you.
`total`Prop	`number`		The number of rows on the server.
`loading`Prop	`boolean`	`false`	Shows a progress bar, and placeholder rows while there are none.
`locale`Prop	`string`	`'en-US'`	Formats numbers and dates, and reads typed numbers.
`labels`Prop	`Partial<NuiGridLabels>`		Every text the grid shows or announces, to translate.
`corners`Prop	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Prop	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Prop	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`groupBy`Prop	`string[]`	`[]`	Columns to group rows by, outermost first.
`collapsed` `defaultCollapsed` `onCollapsedChange`State	`string[]`	`[]`	Keys of the groups closed; groups start open.
`getChildren`Prop	`(row: T) => T[] \| undefined`		A row’s children: the grid shows tree data.
`expanded` `defaultExpanded` `onExpandedChange`State	`unknown[]`	`[]`	Keys of the rows open in tree data; they start closed.
`details` `defaultDetails` `onDetailsChange`State	`unknown[]`	`[]`	Keys of the rows whose details are open.
`totals, flash`Prop	`boolean`	`false`	A row of aggregates over every filtered row; cells that flash when their text changes, in rows with a lasting `rowId`.
`layout`Prop	`'table' \| 'list' \| 'auto'`	`'table'`	`list` shows rows as cards, and `auto` does on narrow screens.
`toolbar`Prop	`boolean \| 'auto'`	`'auto'`	A bar that sorts, filters and selects all rows: always, never, or `auto` with cards.
`renderEmpty`Render prop	`(filtered: boolean) => ReactNode`		What shows when there are no rows; it’s told whether filters hid them.
`renderDetail`Render prop	`(row: T) => ReactNode`		A row’s details, shown under it when opened. The grid adds a column of toggles.
`onRowActivate`Callback	`(row: T) => void`		Called with a row opened with Enter or a double click.
`onCellEdit`Callback	`(edit: NuiGridEdit<T>) => void`		Called with each committed edit.
`onQueryChange`Callback	`(query: NuiGridQuery) => void`		Called with the sort, filters, search and page whenever they change, and once at the start.
`ref`Prop	`Ref<NuiGridHandle>`		What the grid’s `ref` reaches: exports, printing and focus.
`exportXlsx, print`Method	`(options?) => Blob, () => void`		The filtered, sorted rows as a spreadsheet; prints every row.
`exportCsv`Method	`(options?) => string`		The filtered, sorted rows of the visible columns, as CSV.
`expandAll`Method	`(open?: boolean) => void`		Opens every group and every row with children, or closes them all.
`focusCell`Method	`(row: number, col: number) => void`		Focuses a cell; row `-1` is the header.
`clearFilters`Method	`() => void`		Clears every filter and the search.
`fit`Method	`(id: string) => void`		Fits a column to the widest of its rendered cells.

State works like React’s own inputs: pass a value and update it from its on…Change callback, or pass a default… value and let the component keep it.

Customization props you leave unset follow the nearest data-nui-* attribute. See the customization guide.

NuiGridColumn

One column. It takes every property of the Angular column (only id and header are required), and these two that draw it.

NuiGridColumn: Properties
Name	Type	Default	Description
`renderCell`Render prop	`({ row, value, text, column }) => ReactNode`		Draws the column’s cells yourself, from the row, its value and its text.
`renderHeader`Render prop	`(column) => ReactNode`		Draws the column’s header yourself; `header` still names it.