Data Grid — cinder playground

Overview

ARIA data grid foundation for spreadsheet-like datasets with stable row identity, explicit column widths, keyboard navigation, row selection, cell/range selection, and pinned-column metadata.

Usage

<script lang="ts">
  import { DataGrid } from '@lostgradient/cinder/data-grid';

  const columns = [
    { key: 'id', header: 'Order', width: 120, pin: 'left' },
    { key: 'customer', header: 'Customer', width: 220 },
    { key: 'status', header: 'Status', width: 140 },
  ];

  const rows = [
    { id: 'ORD-1001', customer: 'Ada Lovelace', status: 'Packed' },
    { id: 'ORD-1002', customer: 'Grace Hopper', status: 'Shipped' },
  ];
</script>

<DataGrid {columns} {rows} getRowId={(row) => row.id} aria-label="Orders" />

Guidance

Use When

Rendering an interactive tabular surface that needs grid semantics instead of native table semantics.
You need built-in row selection, cell focus, range selection, and copy behavior before adding virtualization or editing.

Avoid When

You only need a semantic read-only table — use DataTable or the Table family instead.
You need resize handles, drag-to-reorder controls, or editing today.

Live preview

When to use

Use when

Rendering interactive tabular data that will need grid behavior such as selection, virtualization, resizing, or editing.
You need role=grid semantics instead of native table semantics.

Avoid when

You only need a semantic read-only table — use DataTable or the Table family instead.
You need resize handles, drag-to-reorder controls, or editing today — DataGrid does not provide them yet.

Examples

Pinned order grid

A static ARIA grid with stable row ids, explicit column widths, and a pinned identifier column.

Virtualized activity log

A fixed-height DataGrid window rendering 50,000 rows and a horizontal column window with pinned edges.

Props

Props for data-grid
Name	Type	Default	Required	Bindable	Description
`rows`	`readonly TRow[]`		req
`columns`	`readonly DataGridColumnDef<TRow>[]`		req
`getRowId`	`(row: TRow) => string`		req		Stable row identity used for ARIA ids and row-scoped state.
`density`	`'compact' \| 'comfortable' \| 'spacious'`	`'comfortable'`			Controls body row padding density. Defaults to `'comfortable'`.
`stickyHeader`	`boolean`	`true`			Keeps the column header row pinned to the top edge while scrolling. Defaults to `true`.
`virtualizeRows`	`boolean`	`false`			Enables fixed-height row virtualization.
`virtualizeColumns`	`boolean`	`false`			Enables LTR horizontal virtualization for unpinned columns. Pinned columns stay rendered.
`rowHeight`	`number`				Fixed body-row pixel height used by row virtualization. Defaults to 44 when omitted or invalid.
`columnOrder`	`readonly string[]`				Applies a supplied column order.
`columnSizing`	`Record<string, number>`				Overrides resolved column widths by column key.
`columnPinning`	`{ left?: readonly string[]; right?: readonly string[]; }`				Pins supplied column keys to the left or right edge.
`selectionMode`	`'none' \| 'single' \| 'multiple'`	`'none'`			Controls row-selection behavior. Cell focus and range selection remain available.
`selectionModel`	`DataGridSelectionModel\|undefined`			bind	Controlled row-selection ids, keyed by `getRowId`.
`onSelectionModelChange`	`(selectionModel: DataGridSelectionModel) => void`				Called when row selection changes through cell interaction.
`sortModel`	`readonly DataGridSortModelItem[]`	`[]`		bind	Controls the row sort order used to render rows.
`onSortModelChange`	`(sortModel: DataGridSortModel) => void`				Called after the user changes sort order and DataGrid updates `sortModel`.
`rowClass`	`string\|((row: TRow, rowIndex: number) => string\|undefined)`				Additional class names for body rows.
`getRowAriaLabel`	`(row: TRow, rowIndex: number) => string\|undefined`				Optional accessible row label for screen-reader row summaries.
`onkeydown`	`unknown`		req