DataGrid

Usage and props

Import this component from @stackunseen/ui/application. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/application.css.

Pass the rows for the current page. The grid requests sorting, filtering, paging and selection changes; your application updates the data and controlled props. Filter, sort and page rows in your host before passing the current window. Selection never grants permission to act on a record.

captionstring

The native table caption and scroll-region name.

columnsreadonly DataGridColumn<Row>[]

Stable column IDs, headers and trusted React cell renderers. Use rowHeader for the record name.

rowsreadonly Row[]

The host-filtered, sorted and paged window. The grid does not fetch or transform it.

getRowId(row: Row) => string

A unique, nonblank ID used for selection and focus recovery.

sortDataGridSort | null (optional)

Current column and direction. onSortChange cycles ascending, descending and unsorted.

paginationDataGridPagination (optional)

Zero-based pageIndex, pageSize and totalRows. For an unknown total, supply hasNextPage.

selectedRowIdsreadonly string[] (optional)

Selected IDs across pages. The header checkbox changes only selectable rows on the current page.

onSelectionChange(ids: readonly string[]) => void (optional)

Requests the full updated selection, preserving IDs outside this page.

columnVisibilityReadonly<Record<string, boolean>> (optional)

Visible columns by ID. onColumnVisibilityChange requests the updated map.

filterDataGridFilter (optional)

Controlled value, accessible label and onValueChange callback for search.

These are the main props for the example. The package's TypeScript declarations include the full API.

Customize and use with a keyboard