DataGrid
Data Display

DataGrid

Virtualised data grid with sortable columns, row selection, and in-place cell editing. Windows rows for performance at scale.

Component behavior

DataGrid accepts column definitions and rows and manages sorting, selection, and cell rendering. Table provides styled elements for application-defined markup, including spanning cells and grouped headers.

Use cases
  • Tables defined through column configuration.
  • Tables requiring built-in sorting and row selection.
  • Tables with computed or user-configurable columns.
Alternatives

Table: custom row markup, spanning cells, or grouped headers are required.

VirtualList: row virtualization is required.

TreeTable: rows form a hierarchy.

DescriptionList: the view displays fields from one record.

Props

DataGridProps<T> props
PropTypeDefaultDescription
rowsT[]—Array of data rows.
columnsDataGridColumn<T>[]—Column definitions (see below).
getRowId(row: T, index: number) => string—Stable row identifier used to retain selection after sorting.
rowHeightnumber30Fixed row height in px.
heightnumber | string420Container height in px or CSS length.
sortDataGridSort | null—Current sort state { key, direction }.
onSortChange(sort: DataGridSort | null) => void—Called when the user clicks a sortable column header.
selectedIdsstring[]—Controlled selected row IDs. Omit to disable selection.
onSelectionChange(ids: string[]) => void—Called when selection changes.
onCellEdit(edit: CellEdit<T>) => void—Called when a cell edit is committed and passes validation.
onRowClick(row: T, index: number) => void—Called when a row is clicked.
emptyStateReactNode"No rows"Shown when rows is empty.
footerRowReactNode—Sticky summary row pinned under the header.
stripedboolean—Zebra striping for alternating rows.
borderedbooleantrueGrid border and corner radius. Turn off inside a Card.
classNamestring—Additional CSS class.

DataGridColumn<T>

DataGridColumn<T> props
PropTypeDefaultDescription
keystring—Key into the row, and column identity for sorting/editing.
headerReactNode—Column header content.
widthnumber—Fixed px width, or min width when flex is set.
flexnumber—Flex grow factor for proportional width.
align"left" | "right" | "center"—Text alignment within the column.
numericboolean—Right-aligned monospace figures.
sortableboolean—Enables click-to-sort on the column header. Clicks cycle through the starting direction, its reverse, then unsorted.
defaultSortDirection"asc" | "desc"numeric ? "desc" : "asc"Where the column starts when the sort moves onto it.
editableboolean—Enables double-click / Enter to edit inline.
render(row: T, rowIndex: number) => ReactNode—Custom cell renderer. Falls back to String(row[key]).
getValue(row: T) => string | number—Value used for sorting and initial editor text.
validate(raw: string, row: T) => string | null—Inline edit validator. Return an error string to reject the value or null to accept it.
parse(raw: string, row: T) => unknown—Transforms the accepted edit string into the committed cell value.

Examples

Basic DataGrid with sorting

Sortable data grid

Striped rows

Striped data grid
ImportTSX
import { DataGrid } from "@solarius/onset";
import type { DataGridColumn, DataGridSort, CellEdit } from "@solarius/onset";