DataGrid

Fixed px width — required for pinned columns to compute offsets cleanly.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

• Use it when Dense, interactive tabular data: sorting, filtering, saved views, selection, inline edit.
• Reach for something else when A simple read-only list — use Table.

Accessibility

Semantic table with column headers, aria-sort on sortable columns, keyboard-reachable filters, selection and inline edit.

Import

const { DataGrid } = window.PrismDesignSystem_39d121;

Examples

Saved views + selection

<DataGrid columns={columns} rows={rows} getRowKey={(r) => r.id}
  isSelectable views={views} maxHeight={420} onCellEdit={save} />

Status cell renderer

{ key: "status", header: "Status",
  render: (r) => <Badge tone={toneFor(r.status)}>{r.status}</Badge> }

Props

Prop	Type	Required	Description
columns	DataGridColumn<Row>[]	Yes
rows	Row[]	Yes
getRowKey	(row: Row, index: number) => React.Key	—
density	"comfortable" | "compact"	—
isSelectable	boolean	—
views	DataGridView[]	—	Named presets shown in the Saved views menu.
onCellEdit	(rowKey: React.Key, columnKey: string, value: string) => void	—
onRowAction	(row: Row) => void	—
maxHeight	number	—	Max body height before the grid scrolls (px). Default 460.
emptyState	React.ReactNode	—	Custom node rendered when no rows match.
className	string	—