DataGrid

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.

See the tabular family boundaries. DataGrid is the interactive-grid alternative to the native Table and DataTable families; choose Table for bespoke native markup or DataTable for data-shaped native tables.

Usage

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

  type Order = { id: string; customer: string; status: string };

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

  const rows: Order[] = [
    { 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.