@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/data-grid.examples.md

@@ -0,0 +1,2846 @@
+<!-- index: ./index.md -->
+# data-grid
+
+`data-ui="data-grid"` · Table that sorts, filters and selects records.
+
+## Examples
+
+### Playground
+
+Every capability on one listing of shipments: sort with a press and Shift, filter from the funnel or the row, select with the checkboxes, edit a cell with Enter, pin and resize from the header. The toolbar switches scheme, density and direction.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  columns={columns}
+  height="100%"
+  label="Shipments"
+  rowKey="id"
+  rows={shipments}
+  selectionMode="multiple"
+/>;
+```
+
+### Columns
+
+Each column declares its kind, and the kind decides the comparator, the operators, the editor and the alignment: a number column sits its digits at the end in tabular figures, a date column formats the ISO day in the reader’s locale, a set column names its values.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(8);
+
+export default function DataGridColumns() {
+  return (
+    <DataGrid aria-label="Shipments" columns={COLUMNS} rowKey="id" rows={ROWS} height="22rem" />
+  );
+}
+```
+
+### Column groups
+
+A second header row above the columns: each group spans the columns it names, wherever the reader has laid them out, and a column no group names spans itself.
+
+Example
+
+```tsx
+import type { GridColumn, GridColumnGroup } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const GROUPS: GridColumnGroup[] = [
+  { id: 'shipment', label: 'Shipment', columns: ['id', 'customer', 'destination'] },
+  { id: 'transport', label: 'Transport', columns: ['carrier', 'status', 'shipped'] },
+  { id: 'charges', label: 'Charges', columns: ['weight', 'cost'] },
+];
+
+const ROWS = shipments(8);
+
+export default function DataGridColumnGroups() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      columnGroups={GROUPS}
+      height="22rem"
+    />
+  );
+}
+```
+
+### Sorting
+
+A press on a header sorts ascending, a second descending, a third removes the key; Shift with the press appends the column to the order instead, and the second and third keys carry their index beside the mark. Enter on the header does the same from the keyboard.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(12);
+
+export default function DataGridSorting() {
+  const [query, setQuery] = useState<GridQuery>({
+    ...emptyQuery(),
+    sort: [
+      { column: 'carrier', direction: 'ascending' },
+      { column: 'cost', direction: 'descending' },
+    ],
+  });
+  const order = query.sort.map((key) => `${key.column} ${key.direction}`).join(', ') || 'none';
+
+  return (
+    <Stack gap={3}>
+      <Text size="sm" tone="muted">
+        Sorted by: {order}
+      </Text>
+      <DataGrid
+        aria-label="Shipments"
+        columns={COLUMNS}
+        rowKey="id"
+        rows={ROWS}
+        height="22rem"
+        onQueryChange={setQuery}
+        query={query}
+      />
+    </Stack>
+  );
+}
+```
+
+### The filter panel
+
+Ctrl+Enter on a header or its menu opens the panel: one line per condition — operator and operand in sm — the join as two words on the second line once the first is complete, Clear and Apply at the end. Nothing reaches the query until Apply.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  defaultQuery={
+    withColumnFilter(emptyQuery(), 'customer', {
+      kind: 'text',
+      join: 'or',
+      conditions: [
+        { operator: 'contains', value: 'nord' },
+        { operator: 'startsWith', value: 'B' },
+      ],
+    }).query
+  }
+/>;
+```
+
+### The filter row
+
+With filterRow the row under the header holds one operand per column, plain, with the operator as a symbol at its start — press it for the names in full. Text and number apply after the debounce and on Enter; a set, a boolean and a date apply on change. The cursor walks the row.
+
+Example
+
+```tsx
+import { emptyQuery, withColumnFilter, type GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const INITIAL_QUERY = withColumnFilter(emptyQuery(), 'status', {
+  kind: 'set',
+  join: 'and',
+  conditions: [{ operator: 'anyOf', value: ['Delayed', 'Customs'] }],
+}).query;
+
+const ROWS = shipments(24);
+
+export default function DataGridFilterRow() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      defaultQuery={INITIAL_QUERY}
+      filterRow
+      height="24rem"
+    />
+  );
+}
+```
+
+### With a filter bar
+
+One descriptor, two families: the bar above edits query.filter and the grid evaluates it, nested groups included. A rule written in a column header appears as a chip in the bar, and a chip removed in the bar clears the header’s funnel.
+
+Excerpt — not a complete module
+
+```tsx
+<>
+  <FilterBar
+    fields={fields}
+    onValueChange={(filter) => setQuery(withFilter(query, filter).query)}
+    value={query.filter}
+  />
+  <DataGrid columns={columns} onQueryChange={setQuery} query={query} rowKey="id" rows={shipments} />
+</>;
+```
+
+### Search
+
+One condition that belongs to no column: query.search is matched against the text of every searchable column through the locale collator, so "agua" finds "Água". The field that writes it is the consumer’s own text-field.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(24);
+
+export default function DataGridSearch() {
+  const [query, setQuery] = useState<GridQuery>({ ...emptyQuery(), search: 'graz' });
+
+  return (
+    <Stack gap={3}>
+      <TextField
+        aria-label="Search shipments"
+        clearable
+        onValueChange={(text) => setQuery((current) => withSearch(current, text).query)}
+        placeholder="Search shipments"
+        value={query.search}
+      />
+      <DataGrid
+        aria-label="Shipments"
+        columns={COLUMNS}
+        rowKey="id"
+        rows={ROWS}
+        height="22rem"
+        onQueryChange={setQuery}
+        query={query}
+      />
+    </Stack>
+  );
+}
+```
+
+### Row selection
+
+single chooses one row with a press; multiple draws the checkbox column, pinned to the start: Shift extends from the anchor, Shift+Space toggles the row from any cell, Ctrl+A and the header checkbox cover every row the query left and say so in their name.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Text } from '@slotted/react/typography';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(12);
+
+export default function DataGridSelection() {
+  const [value, setValue] = useState<string | readonly string[] | null>(['SH-3302', 'SH-3303']);
+  const count = Array.isArray(value) ? value.length : value === null ? 0 : 1;
+
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      disabledKeys={['SH-3305']}
+      footer={
+        <Text size="sm" tone="muted">
+          {count} selected
+        </Text>
+      }
+      height="24rem"
+      onValueChange={setValue}
+      selectionMode="multiple"
+      value={value}
+    />
+  );
+}
+```
+
+### Cell range
+
+range selects a rectangle of cells: Shift with the arrows extends it from the anchor, Shift with a press sets it, a drag paints it, Ctrl+Space takes the column and Shift+Space the row. Ctrl+C copies it as tab-separated text; Escape clears it.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(12);
+
+export default function DataGridRange() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      defaultCurrent={{ row: 'SH-3303', column: 'weight' }}
+      height="24rem"
+      selectionMode="range"
+    />
+  );
+}
+```
+
+### Editing a cell
+
+Enter, F2, a double press or a typed key open the cell’s editor — the field family of its kind, plain, filling the cell. Enter commits and moves one row down, Tab commits and moves to the next editable cell, Escape cancels. The commit may return a promise; the cell dims until it settles.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const EDIT_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>
+  column.id === 'weight'
+    ? {
+        ...column,
+        editable: true,
+        validate: (value: unknown) =>
+          typeof value === 'number' && value <= 0 ? 'Enter a weight above zero.' : null,
+      }
+    : ['customer', 'destination', 'carrier'].includes(column.id)
+      ? { ...column, editable: true }
+      : column,
+);
+
+const ROWS = shipments(8);
+
+export default function DataGridEditing() {
+  const [rows, setRows] = useState(ROWS);
+
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={EDIT_COLUMNS}
+      rowKey="id"
+      rows={rows}
+      editMode="cell"
+      height="22rem"
+      onEditCommit={({ key, changes }) =>
+        setRows((current) => current.map((row) => (row.id === key ? { ...row, ...changes } : row)))
+      }
+    />
+  );
+}
+```
+
+### Editing a row
+
+editMode="row" opens every editable cell of the row at once: Tab moves between them, Enter commits the row with every change in one request, Escape cancels them all.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const EDIT_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>
+  column.id === 'weight'
+    ? {
+        ...column,
+        editable: true,
+        validate: (value: unknown) =>
+          typeof value === 'number' && value <= 0 ? 'Enter a weight above zero.' : null,
+      }
+    : ['customer', 'destination', 'carrier'].includes(column.id)
+      ? { ...column, editable: true }
+      : column,
+);
+
+const ROWS = shipments(8);
+
+export default function DataGridEditingRow() {
+  const [rows, setRows] = useState(ROWS);
+
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={EDIT_COLUMNS}
+      rowKey="id"
+      rows={rows}
+      editMode="row"
+      height="22rem"
+      onEditCommit={({ key, changes }) =>
+        setRows((current) => current.map((row) => (row.id === key ? { ...row, ...changes } : row)))
+      }
+    />
+  );
+}
+```
+
+### Validation, failure and conflict
+
+A column’s validate refuses a draft with a message: the cell turns invalid and keeps what was typed. A commit that rejects reopens the editor with the draft and the error. A row that changes under an open editor is a conflict, said in the same place.
+
+Excerpt — not a complete module
+
+```tsx
+const columns = [
+  {
+    id: 'weight',
+    label: 'Weight',
+    kind: 'number',
+    editable: true,
+    validate: (value) => (value < 0 ? 'A weight is not negative' : null),
+  },
+];
+<DataGrid columns={columns} onEditCommit={() => Promise.reject(new Error('Offline'))} />;
+```
+
+### Row activation
+
+activatable turns a double press or Enter on a text cell into onActivate with the row’s key — opening the record is a different act from choosing it, and the two never share a key. An editable cell keeps Enter for its editor. On a touch screen or with a pen one press activates, except on a widget in the cell or a cell in edit, and the double press that follows within 500ms is ignored.
+
+Example
+
+```tsx
+import { useState } from 'react';
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Stack } from '@slotted/react/stack';
+import { Text } from '@slotted/react/typography';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(12);
+
+export default function DataGridActivation() {
+  const [opened, setOpened] = useState<string | null>(null);
+
+  return (
+    <Stack gap={3}>
+      <Text size="sm" tone="muted">
+        {opened ? `Opened ${opened}` : 'Double-click a row, or press Enter on its shipment cell.'}
+      </Text>
+      <DataGrid
+        aria-label="Shipments"
+        columns={COLUMNS}
+        rowKey="id"
+        rows={ROWS}
+        activatable
+        height="22rem"
+        onActivate={({ key }) => setOpened(key)}
+      />
+    </Stack>
+  );
+}
+```
+
+### Pinned columns
+
+A column pinned to the start or the end stays while the others scroll; the checkbox column is always pinned. Pin from the column menu or the state; the last column of each zone draws the edge, darker while something is hidden under it.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid defaultColumnState={{ pinned: { start: ['id'], end: ['actions'] } }} />;
+```
+
+### Resizing
+
+Drag the handle on a column’s trailing edge; Escape during the drag restores the width. From the keyboard, Ctrl+Shift+ArrowRight widens by eight pixels and announces the width; Ctrl+Shift+Enter and a double press on the handle fit the column to its mounted cells.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  columnState={state}
+  onColumnStateChange={(next, request) => request.change === 'width' && setState(next)}
+/>;
+```
+
+### Reordering
+
+Drag a header along the row: the drop indicator shows the boundary it lands on, and a column never leaves its pin zone. Alt+ArrowLeft and Alt+ArrowRight move the column one place from the keyboard. Every move is announced.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid defaultColumnState={{ order: ['customer', 'id', 'carrier'] }} />;
+```
+
+### The column menu
+
+Revealed by the pointer and by the cursor, opened with Ctrl+Enter, a secondary press on the header (at the press; Shift keeps the browser’s menu) or Shift+F10 and the Menu key (on the header cell): sort ascending, descending or remove; filter; pin to either edge or unpin; fit to content, and fit all columns in one request; hide; and manage columns, which hands over to the application’s column-manager. A fit chosen by pointer carries reason pointer, by keyboard reason keyboard; Shift with a double press on the resizer fits every column.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid onManageColumns={() => setManagerOpen(true)} />;
+```
+
+### A column that explains itself
+
+ARR and Margin carry a description; Status carries a help node with a link. The circled question mark stays shown, because a coarse pointer has no hover; it opens a popover on a press, Enter or Space, and never sorts. The description is also the header’s accessible description and the caption atop its menu. F2 on a header reaches the button without a pointer.
+
+Excerpt — not a complete module
+
+```tsx
+const columns: DataGridColumn<Account>[] = [
+  {
+    id: 'arr',
+    label: 'ARR',
+    kind: 'number',
+    description: 'Annual recurring revenue, in US dollars',
+  },
+  { id: 'status', label: 'Status', help: <StatusGlossary /> },
+];
+```
+
+### Undoing a hidden column
+
+Hide column announces “Carrier hidden” and asks with change: hidden. The application answers with a toast whose Undo shows that column again through withColumnHidden: a hide moves no order, width or pin, so the column returns to its place and its width, and whatever the reader changed after the hide stays. Writing back request.previous would undo those changes too.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  columnState={state}
+  onColumnStateChange={(next, request) => {
+    setState(next);
+    if (request.change !== 'hidden') return;
+    const shown = next.hidden.filter((column) => !request.previous.hidden.includes(column));
+    const id = toaster.show({
+      title: 'Column hidden',
+      actions: (
+        <Button
+          onClick={() => {
+            setState((current) =>
+              shown.reduce((state, column) => withColumnHidden(state, column, false), current),
+            );
+            toaster.dismiss(id, 'pointer');
+          }}
+          size="sm"
+          variant="outline"
+        >
+          Undo
+        </Button>
+      ),
+    });
+  }}
+/>;
+```
+
+### Saving a view
+
+A view is the column state, the query and the density as one line of text: serializeGridView writes it, parseGridView reads it back and drops a column the model no longer has. usePersistedGridView keeps that line under a key in localStorage (or any store with getItem, setItem and removeItem; null keeps it in memory), reads it once on mount, writes it after every change, and resets to the defaults by removing the entry. Hand reset, onDensityChange and setView — which replaces the whole view in one write, as applying a saved view does — to the controls that call them, and spread the rest on the grid. Selection, cursor and expansion are session state and are not kept.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(12);
+
+export default function DataGridColumnState() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      defaultColumnState={{ pinned: { start: ['id'], end: ['cost'] }, widths: { customer: 240 } }}
+      height="24rem"
+      selectionMode="multiple"
+    />
+  );
+}
+```
+
+### Grouping
+
+query.group names the columns the rows are grouped by, outermost first. A group row carries its level, its count and the aggregates of its rows; ArrowLeft closes it and ArrowRight opens it. expandedGroups is the set of open groups, all by default.
+
+Example
+
+```tsx
+import { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const INITIAL_QUERY: GridQuery = {
+  ...emptyQuery(),
+  group: ['carrier'],
+  sort: [{ column: 'id', direction: 'ascending' }],
+};
+
+const ROWS = shipments(20);
+
+export default function DataGridGrouping() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      defaultQuery={INITIAL_QUERY}
+      height="26rem"
+    />
+  );
+}
+```
+
+### Aggregates
+
+A column with aggregate — sum, avg, min, max, count or a function — draws the summary row, pinned to the end of the scroller, over every row the query kept; a grouped grid draws the same aggregate on each group row.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const SUM_COLUMNS: GridColumn<Shipment>[] = COLUMNS.map((column) =>
+  column.id === 'weight' || column.id === 'cost'
+    ? { ...column, aggregate: 'sum' as const }
+    : column,
+);
+
+const ROWS = shipments(10);
+
+export default function DataGridSummary() {
+  return (
+    <DataGrid aria-label="Shipments" columns={SUM_COLUMNS} rowKey="id" rows={ROWS} height="24rem" />
+  );
+}
+```
+
+### Row detail
+
+renderDetail gives a row a detail: the expander column appears, ArrowRight on it opens the detail under the row as one cell spanning every column and held to the frame, ArrowLeft closes it. expanded is the set of open rows.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Text } from '@slotted/react/typography';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(8);
+
+export default function DataGridDetail() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      defaultExpanded={['SH-3301']}
+      height="26rem"
+      renderDetail={(row) => (
+        <Text size="sm">
+          {row.carrier} picked up {row.weight.toFixed(1)} kg on {row.shipped} for {row.destination}.
+          Charged {money(row.cost)}.
+        </Text>
+      )}
+    />
+  );
+}
+```
+
+### Ten thousand rows
+
+Above a hundred rows the grid windows them: the body is as tall as every row and only the ones in view, plus the overscan, are in the DOM. Scroll, or jump with Ctrl+End — the last row is mounted and focused. Above twenty middle columns the same happens sideways.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(10_000);
+
+export default function DataGridVirtualization() {
+  return (
+    <DataGrid
+      aria-label="Shipments, 10,000 rows"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      height="26rem"
+      selectionMode="multiple"
+    />
+  );
+}
+```
+
+### Server mode
+
+With totalCount or hasMore the grid draws the rows it is given and reports the query instead of applying it: sorting, filtering, searching and paging all arrive as one request saying what changed, and a server answers with the page.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  loading={pending}
+  onQueryChange={(next, request) => fetchPage(next, request.change)}
+  query={query}
+  rows={page.rows}
+  totalCount={page.total}
+/>;
+```
+
+### A data source
+
+dataSource hands the grid its own fetching: getRows is called with the query on every change and an AbortSignal, the request before it aborted; the answer — rows, total or hasMore — is kept by the query’s text (cacheSize, default 20), so a page the reader comes back to is on screen at once. The grid is in server mode with the loading and the error states of its own: a rejection is the error state with the message thrown, Try again asks the same query, handle.reload() drops the cache. rows, totalCount, loading, error and onRetry are the source’s and are not read.
+
+Excerpt — not a complete module
+
+```tsx
+const shipments: DataGridDataSource<Shipment> = {
+  getRows: (query, { signal }) =>
+    fetch(`/api/shipments?${toGridParams(query)}`, { signal }).then((response) => response.json()),
+};
+<DataGrid
+  columns={columns}
+  dataSource={shipments}
+  defaultQuery={emptyQuery({ index: 0, size: 25 })}
+  rowKey="id"
+/>;
+```
+
+### Pagination
+
+query.page carries the index and the size; the pagination family in the footer moves both, in the bar a table carries: a page size, the range and the two triggers, at the inline end. The status states the range, so showRange is off. A change of filter, search or group puts the page back at the start in the same request.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  footer={
+    <Pagination
+      count={total}
+      onPageChange={(page) => setQuery(withPageIndex(query, page - 1).query)}
+      onPageSizeChange={(size) => setQuery(withPageSize(query, size).query)}
+      page={query.page.index + 1}
+      pageSize={query.page.size}
+      pageSizeOptions={[25, 50, 100]}
+    >
+      <PaginationPageSize />
+      <PaginationStatus />
+      <PaginationPrevious />
+      <PaginationNext />
+    </Pagination>
+  }
+  query={query}
+  showRange={false}
+/>;
+```
+
+### Load more
+
+With an unknown total the footer states the range without one and offers Load more; when the grid windows its rows, onLoadMore is called on its own as the window nears the end.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  hasMore={hasMore}
+  onLoadMore={fetchMore}
+  query={{ ...emptyQuery(), page: { cursor, size: 50 } }}
+  rows={rows}
+/>;
+```
+
+### Empty, no results, error, loading
+
+Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid error={error} loading={loading} onRetry={reload} rows={rows} />;
+```
+
+### Variants
+
+plain draws no rules and no band; ruled draws a rule between rows; framed adds the border, the radius and the footer inside. striped tints every second row under every state.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid striped variant="framed" />;
+```
+
+### Long values
+
+truncate is the default — a column has a width — and keeps the whole value in the cell’s title; wrap breaks an unbroken token rather than widening the column; nowrap keeps a code on one line. A value keeps its own direction in a right-to-left grid.
+
+Excerpt — not a complete module
+
+```tsx
+const columns = [
+  { id: 'customer', label: 'Customer', text: 'wrap' },
+  { id: 'hash', label: 'Hash', text: 'nowrap' },
+];
+```
+
+### Density
+
+The row reads the theme’s control scale: 34 pixels at comfortable, 28 at compact, 26 at dense, with the type and the inset stepping with it. Without density the grid takes the page’s, which the toolbar switches; with density it writes data-slotted-density on its own root and holds that one whatever the page says. The menu and the popovers it opens are portals and stay at the page’s density.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid columns={columns} density="dense" rowKey="id" rows={shipments} />;
+```
+
+### Columns that yield to a phone
+
+The same grid in a phone-wide room. When the frame is too narrow for the template, columns leave the row: first those without a priority, the last first, then the highest priority; the identity column — the first rowHeader — and an actions column never leave. A column that leaves moves into the row’s pop-in, its label over its value drawn by the same cell renderer; one with popin: false is hidden instead. The root states the pop-in’s count as data-popin, rows grow to their fields, and onOutOfSpaceChange reports both sets — but the column state is untouched, so nothing is persisted and a wider frame brings them back. That is columnOverflow="auto", the default, under 600px, or under 1024px with a coarse pointer; wider, with a mouse, it scrolls. columnOverflow="popin" pops in at every width, and "scroll" keeps every column and scrolls.
+
+Excerpt — not a complete module
+
+```tsx
+const columns: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Tracking', rowHeader: true },
+  { id: 'status', label: 'Status', priority: 1 },
+  { id: 'eta', label: 'ETA', kind: 'datetime', priority: 2 },
+  { id: 'carrier', label: 'Carrier', priority: 3 },
+  { id: 'cost', label: 'Cost', kind: 'number', popin: false },
+];
+<DataGrid columns={columns} onOutOfSpaceChange={setOut} rowKey="id" rows={rows} />;
+```
+
+### Content the grid did not choose
+
+A hundred-character customer name, an unbroken identifier, a right-to-left name, a disabled row, an empty cell in a numeric column and a value with a dash: each holds where the family says it holds.
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { Avatar } from '@slotted/react/avatar';
+import { Badge } from '@slotted/react/badge';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Inline } from '@slotted/react/inline';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const TONE: Record<string, 'secondary' | 'success' | 'danger' | 'warning'> = {
+  'In transit': 'secondary',
+  Delivered: 'success',
+  Delayed: 'danger',
+  Customs: 'warning',
+};
+
+const ROWS = shipments(10);
+
+export default function DataGridContent() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      cellRenderers={{
+        customer: ({ row }) => (
+          <Inline align="center" gap={2}>
+            <Avatar name={row.customer} size="sm" />
+            {row.customer}
+          </Inline>
+        ),
+        status: ({ value }) => (
+          <Badge tone={TONE[String(value)]} variant="soft">
+            {String(value)}
+          </Badge>
+        ),
+      }}
+      height="24rem"
+    />
+  );
+}
+```
+
+### Pictures in cells
+
+A renderer draws anything: an avatar beside the name, a thumbnail in a custom column. A stated rowHeight is the drawn row as well as the windowed one, so ten thousand rows of 56 pixels scroll to the right place. A cell with a picture and a name is one flex row of the renderer’s own; the grid lays out the renderer’s first element as the value.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  cellRenderers={{
+    customer: ({ row }) => (
+      <span className="customer">
+        <Avatar name={row.customer} size="sm" />
+        <span>{row.customer}</span>
+      </span>
+    ),
+    photo: ({ row }) => <Image alt="" radius="sm" ratio="landscape" src={row.photo} />,
+  }}
+  columns={[...columns, { id: 'photo', label: 'Cargo', kind: 'custom', sortable: false }]}
+  rowHeight={56}
+/>;
+```
+
+### Realtime
+
+rows is compared with the rows before it, by key, on the mounted rows only: a cell whose value changed is marked for the time highlightChanges states (true is 1200 ms) and fades on the accent’s subtle ground; under reduced motion the ground stays flat and leaves with the mark. A row that arrived is not a change. Selection, cursor, expansion and scroll survive every tick because the key is the identity.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid highlightChanges rows={feed.rows} />;
+```
+
+### Tree data
+
+tree names each row’s parent by key; a row whose parent is not in rows is a root. The root is a treegrid, every row carries aria-level and a branch aria-expanded. The open branches are expanded — the same state the detail uses; a branch opens its children, a leaf its detail. Filter and search keep a row that matches or has a descendant that matches, with its ancestors; sorting is among siblings; the page is a slice of the open rows; query.group is ignored. In the tree column, ArrowRight opens a closed branch, ArrowLeft closes an open one and climbs to the parent from a leaf. A row hasChildren says has children not yet in rows asks for them through onLoadChildren when opened, and shows the wait until they arrive.
+
+Example
+
+```tsx
+import type { GridColumn, GridTree } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Location {
+  id: string;
+  parent: string | null;
+  name: string;
+  kind: string;
+  units: number;
+}
+
+const LOCATIONS: Location[] = [
+  { id: 'reno', parent: null, name: 'Reno, NV', kind: 'Warehouse', units: 4210 },
+  { id: 'reno-a', parent: 'reno', name: 'Zone A — dry goods', kind: 'Zone', units: 2630 },
+  { id: 'reno-a-01', parent: 'reno-a', name: 'Aisle 01', kind: 'Aisle', units: 1410 },
+  { id: 'reno-a-02', parent: 'reno-a', name: 'Aisle 02', kind: 'Aisle', units: 1220 },
+  { id: 'reno-b', parent: 'reno', name: 'Zone B — chilled', kind: 'Zone', units: 1580 },
+  { id: 'columbus', parent: null, name: 'Columbus, OH', kind: 'Warehouse', units: 3075 },
+  { id: 'columbus-a', parent: 'columbus', name: 'Zone A — dry goods', kind: 'Zone', units: 3075 },
+  { id: 'savannah', parent: null, name: 'Savannah, GA', kind: 'Warehouse', units: 1890 },
+  { id: 'savannah-a', parent: 'savannah', name: 'Zone A — bonded', kind: 'Zone', units: 1890 },
+];
+
+const COLUMNS: GridColumn<Location>[] = [
+  { id: 'name', label: 'Location', accessor: 'name', rowHeader: true, flex: 1, minWidth: 220 },
+  { id: 'kind', label: 'Type', accessor: 'kind', width: 130 },
+  { id: 'units', label: 'Units on hand', accessor: 'units', kind: 'number', width: 150 },
+];
+
+const TREE: GridTree<Location> = { parentKey: (row) => row.parent };
+
+export default function DataGridTree() {
+  return (
+    <DataGrid
+      aria-label="Stock by location"
+      columns={COLUMNS}
+      defaultExpanded={['reno', 'reno-a']}
+      height="22rem"
+      rowKey="id"
+      rows={LOCATIONS}
+      tree={TREE}
+    />
+  );
+}
+```
+
+### Pinned rows
+
+pinnedRows holds rows at the top or the bottom of the body, by key, in the stated order. A held row leaves the query — never sorted, filtered or paged — and stays on screen, under the head and over the summary, at the heights the grid measures for each. It is a row like any other: the cursor walks through it, it selects, edits and exports with the rest, and it counts in aria-rowcount.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid pinnedRows={{ top: ['SHP-20487'], bottom: ['SHP-20481'] }} />;
+```
+
+### Reordering rows
+
+rowsReorderable draws a grip per row in a reserved column. The pointer drags from the grip and drops in a gap, with the same guide a column shows; Alt with the vertical arrows moves the row from any of its cells, and the move is announced. The grid keeps no order of its own: onRowsReorder says where the row goes in rows (from and to, the index it takes once moved) and the consumer moves it. Only while the query is at rest — no sort, filter, search or group — and without a tree, because elsewhere the position on screen is not the position in rows; the grip is disabled otherwise.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  onRowsReorder={({ from, to }) => setRows((rows) => arrayMove(rows, from, to))}
+  rows={rows}
+  rowsReorderable
+/>;
+```
+
+### Export and print
+
+handle.exportCsv builds the file by toCsv — RFC 4180, each cell as the grid draws it — from the rows the query left (every page in client mode) and the columns not hidden in the reader’s order, or the selected rows and every column on request, and hands it to the browser as a download; handle.toCsv returns the text for a consumer who sends it elsewhere. In print, the frame grows to its rows, nothing scrolls or sticks, and the pointer’s controls are not on paper; a windowed grid prints the rows it has mounted, so a consumer who prints ten thousand turns the window off first. Excel is the consumer’s: SheetJS reads the same text.
+
+Excerpt — not a complete module
+
+```tsx
+<>
+  <Button onClick={() => grid.current?.exportCsv({ filename: 'shipments.csv' })}>CSV</Button>
+  <Button onClick={() => grid.current?.exportCsv({ rows: 'selected', bom: true })}>
+    Selected, for Excel
+  </Button>
+  <Button onClick={() => window.print()}>Print</Button>
+</>;
+```
+
+### Keyboard
+
+Tab enters on the current cell and leaves the grid. The arrows move one cell, Home and End along the row, Ctrl+Home and Ctrl+End to the corners, PageUp and PageDown a view. Enter and F2 enter a cell, Escape leaves it. On a header: Enter sorts, Shift+Enter appends, Ctrl+Enter, Shift+F10 and the Menu key open the menu, Ctrl+Shift+arrows resize, Alt+arrows move. The pop-in is the last cell of a row.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  defaultCurrent={{ row: 'SHP-20481', column: 'customer' }}
+  onCurrentChange={(cell) => log(cell)}
+/>;
+```
+
+### What a reader hears
+
+A grid named by aria-label; every row with its index in the whole set and every cell with its column index; aria-sort on the first key and the rest announced; the selection’s size in the header checkbox’s name; a resize as a width; a filter as its sentence. Inspect the tree with a screen reader.
+
+Excerpt — not a complete module
+
+```tsx
+<DataGrid
+  aria-label="Shipments"
+  messages={{
+    selectAllFiltered:
+      '{count, plural, one {Select the # shipment} other {Select all # shipments}}',
+  }}
+/>;
+```
+
+### empty.tsx
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = [] as Shipment[];
+
+export default function DataGridEmpty() {
+  return (
+    <DataGrid aria-label="Shipments" columns={COLUMNS} rowKey="id" rows={ROWS} height="18rem" />
+  );
+}
+```
+
+### error.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = [] as Shipment[];
+
+export default function DataGridError() {
+  const [attempts, setAttempts] = useState(0);
+
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      error="The shipments service did not answer within 30 seconds."
+      height="18rem"
+      onRetry={() => setAttempts(attempts + 1)}
+    />
+  );
+}
+```
+
+### loading.tsx
+
+Example
+
+```tsx
+import type { GridColumn } from '@slotted/core/grid';
+import { DataGrid } from '@slotted/react/data-grid';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = [] as Shipment[];
+
+export default function DataGridLoading() {
+  return (
+    <DataGrid
+      aria-label="Shipments"
+      columns={COLUMNS}
+      rowKey="id"
+      rows={ROWS}
+      height="18rem"
+      loading
+    />
+  );
+}
+```
+
+### shipments-workspace.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { Button } from '@slotted/react/button';
+import { DataGrid } from '@slotted/react/data-grid';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+import { Text } from '@slotted/react/typography';
+
+interface Shipment {
+  id: string;
+  customer: string;
+  destination: string;
+  carrier: string;
+  status: string;
+  shipped: string;
+  weight: number;
+  cost: number;
+  priority: boolean;
+}
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const DESTINATIONS = [
+  'Berlin, DE',
+  'Marseille, FR',
+  'Graz, AT',
+  'Bräcke, SE',
+  'Rio de Janeiro, BR',
+  'Cowes, UK',
+  'Boise, US',
+  'Oulu, FI',
+];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const STATUSES = ['In transit', 'Delivered', 'Delayed', 'Customs'];
+
+function shipments(count: number): Shipment[] {
+  let seed = 7;
+  const next = () => (seed = (seed * 1664525 + 1013904223) % 4294967296) / 4294967296;
+  const pick = <T,>(list: readonly T[]) => list[Math.floor(next() * list.length)]!;
+  return Array.from({ length: count }, (_, index) => {
+    const weight = Math.round(next() * 9000) / 10;
+    return {
+      id: `SH-${3301 + index}`,
+      customer: pick(CUSTOMERS),
+      destination: pick(DESTINATIONS),
+      carrier: pick(CARRIERS),
+      status: pick(STATUSES),
+      shipped: `2026-09-${String(1 + Math.floor(next() * 28)).padStart(2, '0')}`,
+      weight,
+      cost: Math.round(weight * (2 + next() * 3) * 100) / 100,
+      priority: next() < 0.3,
+    };
+  });
+}
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+const money = (value: unknown) => (typeof value === 'number' ? USD.format(value) : '');
+const kilograms = (value: unknown) => (typeof value === 'number' ? `${value.toFixed(1)} kg` : '');
+
+const COLUMNS: GridColumn<Shipment>[] = [
+  { id: 'id', label: 'Shipment', accessor: 'id', rowHeader: true, width: 120, text: 'nowrap' },
+  { id: 'customer', label: 'Customer', accessor: 'customer', flex: 1, minWidth: 180 },
+  { id: 'destination', label: 'Destination', accessor: 'destination', width: 170 },
+  {
+    id: 'carrier',
+    label: 'Carrier',
+    accessor: 'carrier',
+    kind: 'set',
+    width: 110,
+    options: CARRIERS.map((value) => ({ value, label: value })),
+  },
+  {
+    id: 'status',
+    label: 'Status',
+    accessor: 'status',
+    kind: 'set',
+    width: 120,
+    options: STATUSES.map((value) => ({ value, label: value })),
+  },
+  { id: 'shipped', label: 'Shipped', accessor: 'shipped', kind: 'date', width: 130 },
+  {
+    id: 'weight',
+    label: 'Weight',
+    accessor: 'weight',
+    kind: 'number',
+    width: 110,
+    format: kilograms,
+  },
+  { id: 'cost', label: 'Cost', accessor: 'cost', kind: 'number', width: 120, format: money },
+];
+
+const ROWS = shipments(60);
+
+export default function DataGridShipmentsWorkspace() {
+  const [query, setQuery] = useState<GridQuery>(emptyQuery());
+  const [value, setValue] = useState<string | readonly string[] | null>([]);
+  const count = Array.isArray(value) ? value.length : 0;
+
+  return (
+    <Stack gap={3}>
+      <TextField
+        aria-label="Search shipments"
+        clearable
+        onValueChange={(text) => setQuery((current) => withSearch(current, text).query)}
+        placeholder="Search by shipment, customer or destination"
+        value={query.search}
+      />
+      <DataGrid
+        aria-label="Shipments"
+        columns={COLUMNS}
+        rowKey="id"
+        rows={ROWS}
+        footer={
+          <Inline align="center" gap={3}>
+            <Text size="sm" tone="muted">
+              {count} selected
+            </Text>
+            <Button disabled={count === 0} size="sm" variant="outline">
+              Print labels
+            </Button>
+          </Inline>
+        }
+        height="26rem"
+        onQueryChange={setQuery}
+        onValueChange={setValue}
+        query={query}
+        selectionMode="multiple"
+        value={value}
+      />
+    </Stack>
+  );
+}
+```