Data grid API · Needless UI

Import

import-grid.ts

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

NuiGrid

A data grid on a native table.

Selector: nui-grid

NuiGrid: Properties
Name	Type	Default	Description
`rows`Two-way	`readonly T[]`		The data. Edits replace rows, so bind with `[(rows)]`.
`columns`Input	`NuiGridColumn<T>[]`		The columns, as `NuiGridColumn` objects.
`rowId`Input	`(row: T) => unknown`	`row.id ?? row`	A row’s key, for selection and tracking.
`label`Input	`string`		The grid’s accessible name.
`selection`Input	`'none' \| 'single' \| 'multiple'`	`'none'`	Whether rows can be selected, and how many.
`selected`Two-way	`unknown[]`	`[]`	The keys of the selected rows.
`sort`Two-way	`NuiGridSort[]`	`[]`	The sort, as `{ column, direction }` objects; the first sorts first.
`filters`Two-way	`Record<string, NuiGridFilter>`	`{}`	A filter per column id: an operator and a value.
`search`Two-way	`string`	`''`	Words that must all appear in a row.
`pageSize`Two-way	`number`	`0`	Rows per page, or 0 for one scrolling list.
`page`Two-way	`number`	`0`	The page shown, from 0.
`pageSizes`Input	`number[]`	`[10, 25, 50, 100]`	The choices in the pager.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renders only the rows in view: always, never, or `auto` past 100 rows without pages.
`height`Input	`string`		A CSS length that bounds the grid; it scrolls inside.
`columnState`Two-way	`NuiGridColumnState[]`	`[]`	Each column’s width, order, pin and visibility, to save and restore.
`mode`Input	`'client' \| 'server'`	`'client'`	`server` shows rows as they come and leaves sorting, filtering and paging to you.
`total`Input	`number`		The number of rows on the server.
`loading`Input	`boolean`	`false`	Shows a progress bar, and placeholder rows while there are none.
`locale`Input	`string`	`LOCALE_ID`	Formats numbers and dates, and reads typed numbers.
`labels`Input	`Partial<NuiGridLabels>`		Every text the grid shows or announces, to translate.
`corners`Input	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Input	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Input	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`rowActivate`Output	`T`		Emits a row opened with Enter or a double click.
`cellEdit`Output	`NuiGridEdit<T>`		Emits each committed edit.
`queryChange`Output	`NuiGridQuery`		Emits the sort, filters, search and page whenever they change.
`exportCsv`Method	`(options?) => string`		The filtered, sorted rows of the visible columns, as CSV.
`focusCell`Method	`(row: number, col: number) => void`		Focuses a cell; row `-1` is the header.
`clearFilters`Method	`() => void`		Clears every filter and the search.

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

NuiGridColumn

One column. Only id and header are required.

NuiGridColumn: Properties
Name	Type	Default	Description
`id`Property	`string`		Unique; the key in the sort, filters and column state.
`header`Property	`string`		The header text.
`value`Property	`keyof T \| ((row: T) => V)`		A key of the row, or a function of the row. Defaults to `row[id]`.
`type`Property	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	Picks the alignment, sort, filter and editor.
`format`Property	`Intl options \| ((value, row) => string)`		`Intl` options for numbers and dates, or a function that makes the text.
`options`Property	`NuiOption<V>[]`		The choices of an `enum` column, as `NuiOption` objects.
`width, minWidth, maxWidth`Property	`number`		In pixels.
`flex`Property	`number`		Shares the room left over with the other `flex` columns.
`align`Property	`'start' \| 'center' \| 'end'`		Defaults by type: numbers and dates at the end.
`pinned, hidden`Property	`'start' \| 'end', boolean`		The column’s first pin and visibility.
`sortable, filterable, resizable, reorderable, hideable`Property	`boolean`	`true`	Each can be turned off with `false`.
`compare`Property	`(a: V, b: V) => number`		A custom sort.
`editable, validate`Property	`boolean \| ((row) => boolean), (value, row) => string \| null`		Whether cells can be edited, and a message when a value isn’t valid.
`set`Property	`(row: T, value: V) => T`		Makes the edited row. Defaults to a copy with the new value.

NuiGridCell

Draws a column’s cells. The context holds the row, its value and its text.

Selector: ng-template[nuiGridCell]

NuiGridCell: Properties
Name	Type	Default	Description
`nuiGridCell`Input	`string`		The column’s id.

NuiGridHeader

Draws a column’s header.

Selector: ng-template[nuiGridHeader]

NuiGridHeader: Properties
Name	Type	Default	Description
`nuiGridHeader`Input	`string`		The column’s id.

NuiGridEmpty

What shows when there are no rows. The context says whether filters hid them.

Selector: ng-template[nuiGridEmpty]