@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/data-grid.examples.md

@@ -0,0 +1,3064 @@
+<!-- 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
+
+```html
+<sl-data-grid
+  aria-label="Shipments"
+  rowKey="id"
+  height="100%"
+  selectionMode="multiple"
+  [rows]="shipments()"
+  [columns]="columns"
+/>
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-columns',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="22rem"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridColumns {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+}
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn, GridColumnGroup } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-column-groups',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="22rem"
+      [columnGroups]="groups"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridColumnGroups {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly groups = GROUPS;
+}
+```
+
+### 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
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/data-grid';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-sorting',
+  imports: [SlDataGrid, SlStack, SlText],
+  template: `
+    <div slStack [gap]="3">
+      <span slText size="sm" tone="muted">Sorted by: {{ order() }}</span>
+      <sl-data-grid
+        aria-label="Shipments"
+        rowKey="id"
+        height="22rem"
+        [(query)]="query"
+        [columns]="columns"
+        [rows]="rows"
+      ></sl-data-grid>
+    </div>
+  `,
+})
+export class DataGridSorting {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly query = signal<GridQuery>({
+    ...emptyQuery(),
+    sort: [
+      { column: 'carrier', direction: 'ascending' },
+      { column: 'cost', direction: 'descending' },
+    ],
+  });
+  readonly order = computed(
+    () =>
+      this.query()
+        .sort.map((key) => `${key.column} ${key.direction}`)
+        .join(', ') || 'none',
+  );
+}
+```
+
+### 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
+
+```ts
+const query = signal(
+  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
+
+```ts
+import { Component } from '@angular/core';
+import { emptyQuery, withColumnFilter, type GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-filter-row',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      filterRow
+      height="24rem"
+      [query]="initialQuery"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridFilterRow {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly initialQuery = INITIAL_QUERY;
+}
+```
+
+### 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
+
+```html
+<div
+  slFilterBar
+  [fields]="fields"
+  [value]="query().filter"
+  (valueChange)="query.set(withFilter(query(), $event).query)"
+></div>
+<sl-data-grid rowKey="id" [rows]="shipments()" [columns]="columns" [(query)]="query" />
+```
+
+### 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
+
+```ts
+import { Component, signal } from '@angular/core';
+import { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/data-grid';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-search',
+  imports: [SlDataGrid, SlStack, SlTextField, SlTextFieldInput],
+  template: `
+    <div slStack [gap]="3">
+      <div slTextField clearable>
+        <input
+          slTextFieldInput
+          aria-label="Search shipments"
+          placeholder="Search shipments"
+          [value]="query().search"
+          (valueChange)="search($event.value)"
+        />
+      </div>
+      <sl-data-grid
+        aria-label="Shipments"
+        rowKey="id"
+        height="22rem"
+        [(query)]="query"
+        [columns]="columns"
+        [rows]="rows"
+      ></sl-data-grid>
+    </div>
+  `,
+})
+export class DataGridSearch {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly query = signal<GridQuery>({ ...emptyQuery(), search: 'graz' });
+
+  search(text: string): void {
+    this.query.update((current) => withSearch(current, text).query);
+  }
+}
+```
+
+### 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
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid, SlDataGridFooter } from '@slotted/angular/data-grid';
+import { SlText } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-selection',
+  imports: [SlDataGrid, SlDataGridFooter, SlText],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="24rem"
+      selectionMode="multiple"
+      [disabledKeys]="disabled"
+      [(value)]="value"
+      [columns]="columns"
+      [rows]="rows"
+    >
+      <span slDataGridFooter slText size="sm" tone="muted">{{ count() }} selected</span>
+    </sl-data-grid>
+  `,
+})
+export class DataGridSelection {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly disabled = ['SH-3305'];
+  readonly value = signal<string | readonly string[] | null>(['SH-3302', 'SH-3303']);
+  readonly count = computed(() => {
+    const value = this.value();
+    return Array.isArray(value) ? value.length : value === null ? 0 : 1;
+  });
+}
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-range',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="24rem"
+      selectionMode="range"
+      [current]="start"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridRange {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly start = { row: 'SH-3303', column: 'weight' };
+}
+```
+
+### 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 hand back a promise through wait(); the cell dims until it settles.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid, type DataGridEditCommit } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-editing',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      editMode="cell"
+      height="22rem"
+      (editCommit)="commit($event)"
+      [columns]="columns"
+      [rows]="edited()"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridEditing {
+  readonly rows = ROWS;
+  readonly columns = EDIT_COLUMNS;
+  readonly edited = signal(ROWS);
+
+  commit({ key, changes }: DataGridEditCommit<Shipment>): void {
+    this.edited.update((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
+
+```ts
+import { Component, signal } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid, type DataGridEditCommit } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-editing-row',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      editMode="row"
+      height="22rem"
+      (editCommit)="commit($event)"
+      [columns]="columns"
+      [rows]="edited()"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridEditingRow {
+  readonly rows = ROWS;
+  readonly columns = EDIT_COLUMNS;
+  readonly edited = signal(ROWS);
+
+  commit({ key, changes }: DataGridEditCommit<Shipment>): void {
+    this.edited.update((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 whose promise 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
+
+```ts
+const columns: GridColumn<Shipment>[] = [
+  {
+    id: 'weight',
+    label: 'Weight',
+    kind: 'number',
+    editable: true,
+    validate: (value) =>
+      typeof value === 'number' && value < 0 ? 'A weight is not negative' : null,
+  },
+];
+class ShipmentsPage {
+  onCommit(commit: DataGridEditCommit<Shipment>) {
+    commit.wait(Promise.reject(new Error('Offline')));
+  }
+}
+```
+
+### Row activation
+
+activatable turns a double press or Enter on a text cell into activate 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
+
+```ts
+import { Component, signal } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/data-grid';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-activation',
+  imports: [SlDataGrid, SlStack, SlText],
+  template: `
+    <div slStack [gap]="3">
+      <span slText size="sm" tone="muted">{{
+        opened() ? 'Opened ' + opened() : 'Double-click a row, or press Enter on its shipment cell.'
+      }}</span>
+      <sl-data-grid
+        aria-label="Shipments"
+        rowKey="id"
+        activatable
+        height="22rem"
+        (activate)="opened.set($event.key)"
+        [columns]="columns"
+        [rows]="rows"
+      ></sl-data-grid>
+    </div>
+  `,
+})
+export class DataGridActivation {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly opened = signal<string | null>(null);
+}
+```
+
+### 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  [columnState]="{ 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  [(columnState)]="state"
+  (columnStateChangeRequest)="$event.change === 'width' && log($event.value.widths)"
+/>
+```
+
+### 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  [columnState]="{ 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  manageable
+  (manageColumns)="manager.set(true)"
+/>
+```
+
+### A column that explains itself
+
+Weight and Cost carry a description; Status carries an slDataGridColumnHelp template. 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
+
+```html
+<sl-data-grid rowKey="id" [rows]="shipments()" [columns]="columns">
+  <ng-template slDataGridColumnHelp="status">
+    <p>Customs means the shipment is held at a border for inspection.</p>
+  </ng-template>
+</sl-data-grid>
+```
+
+### 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
+
+```ts
+export class ShipmentsPage {
+  // <ng-template #undo let-message>
+  //   <button slButton size="sm" (click)="restore(message.id)">Undo</button>
+  // </ng-template>
+  private readonly undo = viewChild.required<TemplateRef<unknown>>('undo');
+  /** The columns each toast's Undo shows again, by the toast. */
+  private readonly hidden = new Map<string, readonly string[]>();
+
+  onRequest(request: DataGridColumnStateRequest) {
+    if (request.change !== 'hidden') return;
+    const shown = request.value.hidden.filter((id) => !request.previous.hidden.includes(id));
+    const toast = this.toasts.show({ title: 'Column hidden', actions: this.undo() });
+    this.hidden.set(toast, shown);
+  }
+
+  restore(id: string) {
+    const shown = this.hidden.get(id) ?? [];
+    this.hidden.delete(id);
+    this.columnState.update((state) =>
+      shown.reduce((next, column) => withColumnHidden(next, column, false), state),
+    );
+    this.toasts.dismiss(id, 'pointer');
+  }
+}
+```
+
+### 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. persistedGridView keeps that line under a key in localStorage (or any store with getItem, setItem and removeItem; null keeps it in memory), reads it once, writes it after every change through an effect, and resets to the defaults by removing the entry. query and columnState take the two-way bindings and density the density input. Selection, cursor and expansion are session state and are not kept.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn, GridColumnState } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-column-state',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="24rem"
+      selectionMode="multiple"
+      [columnState]="state"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridColumnState {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly state: Partial<GridColumnState> = {
+    pinned: { start: ['id'], end: ['cost'] },
+    widths: { customer: 240 },
+  };
+}
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import { emptyQuery, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-grouping',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="26rem"
+      [query]="initialQuery"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridGrouping {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly initialQuery = INITIAL_QUERY;
+}
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-summary',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="24rem"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridSummary {
+  readonly rows = ROWS;
+  readonly columns = SUM_COLUMNS;
+}
+```
+
+### Row detail
+
+An ng-template with slDataGridDetail 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid, SlDataGridDetailTemplate } from '@slotted/angular/data-grid';
+import { SlText } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-detail',
+  imports: [SlDataGrid, SlDataGridDetailTemplate, SlText],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="26rem"
+      [expanded]="expanded"
+      [columns]="columns"
+      [rows]="rows"
+    >
+      <ng-template slDataGridDetail let-row>
+        <p slText size="sm">
+          {{ row.carrier }} picked up {{ row.weight.toFixed(1) }} kg on {{ row.shipped }} for
+          {{ row.destination }}. Charged {{ money(row.cost) }}.
+        </p>
+      </ng-template>
+    </sl-data-grid>
+  `,
+})
+export class DataGridDetail {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly expanded = ['SH-3301'];
+  readonly money = money;
+}
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-virtualization',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments, 10,000 rows"
+      rowKey="id"
+      height="26rem"
+      selectionMode="multiple"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridVirtualization {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+}
+```
+
+### 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="page().rows"
+  [columns]="columns"
+  [totalCount]="page().total"
+  [loading]="pending()"
+  [(query)]="query"
+  (queryChangeRequest)="fetchPage($event.value, $event.change)"
+/>
+```
+
+### 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, reload() drops the cache. rows, totalCount, loading, error and retry are the source’s and are not read.
+
+Excerpt — not a complete module
+
+```html
+<sl-data-grid rowKey="id" [columns]="columns" [dataSource]="shipments" [(query)]="query" />
+```
+
+### Pagination
+
+query.page carries the index and the size; the pagination family projected with slDataGridFooter 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  [(query)]="query"
+  [showRange]="false"
+>
+  <nav
+    slDataGridFooter
+    slPagination
+    [count]="total()"
+    [pageSize]="pageSize()"
+    [pageSizeOptions]="[25, 50, 100]"
+    [page]="pageIndex() + 1"
+    (pageChange)="query.set(withPageIndex(query(), $event.value - 1).query)"
+    (pageSizeChange)="query.set(withPageSize(query(), $event.value).query)"
+  >
+    <sl-pagination-page-size></sl-pagination-page-size>
+    <p slPaginationStatus></p>
+    <button slPaginationPrevious></button>
+    <button slPaginationNext></button>
+  </nav>
+</sl-data-grid>
+```
+
+### Load more
+
+With an unknown total the footer states the range without one and offers Load more; when the grid windows its rows, loadMore is emitted on its own as the window nears the end.
+
+Excerpt — not a complete module
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="rows()"
+  [columns]="columns"
+  [hasMore]="hasMore()"
+  [query]="{ ...emptyQuery(), page: { cursor: cursor(), size: 50 } }"
+  (loadMore)="fetchMore()"
+/>
+```
+
+### 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="rows()"
+  [columns]="columns"
+  [loading]="loading()"
+  [error]="error()"
+  (retry)="reload()"
+/>
+```
+
+### 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
+
+```html
+<sl-data-grid rowKey="id" variant="framed" striped [rows]="shipments()" [columns]="columns" />
+```
+
+### 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
+
+```ts
+const columns: GridColumn<Shipment>[] = [
+  { 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
+
+```html
+<sl-data-grid density="dense" rowKey="id" [rows]="shipments()" [columns]="columns" />
+```
+
+### 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 template; one with popin: false is hidden instead. The root states the pop-in’s count as data-popin, rows grow to their fields, and outOfSpaceChange 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
+
+```html
+<!-- columns: tracking rowHeader; status priority 1, eta 2, carrier 3; cost popin: false -->
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  (outOfSpaceChange)="out.set($event)"
+/>
+```
+
+### 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
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlAvatar } from '@slotted/angular/avatar';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlDataGrid, SlDataGridCellTemplate } from '@slotted/angular/data-grid';
+import { SlInline } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-content',
+  imports: [SlAvatar, SlBadge, SlDataGrid, SlDataGridCellTemplate, SlInline],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="24rem"
+      [columns]="columns"
+      [rows]="rows"
+    >
+      <ng-template slDataGridCell="customer" let-row="row">
+        <div slInline align="center" [gap]="2">
+          <span slAvatar size="sm" [name]="row.customer"></span>
+          {{ row.customer }}
+        </div>
+      </ng-template>
+      <ng-template slDataGridCell="status" let-value="value">
+        <span slBadge variant="soft" [tone]="tone[value]">{{ value }}</span>
+      </ng-template>
+    </sl-data-grid>
+  `,
+})
+export class DataGridContent {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly tone = TONE;
+}
+```
+
+### Pictures in cells
+
+A cell template 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 template’s own; the grid lays out the template’s first element as the value.
+
+Excerpt — not a complete module
+
+```html
+<sl-data-grid rowKey="id" [rows]="shipments()" [columns]="columns" [rowHeight]="56">
+  <ng-template slDataGridCell="customer" let-row="row">
+    <span class="customer">
+      <span slAvatar [name]="row.customer" size="sm"></span>
+      <span>{{ row.customer }}</span>
+    </span>
+  </ng-template>
+  <ng-template slDataGridCell="photo" let-row="row">
+    <div slImage alt="" radius="sm" ratio="landscape" [src]="row.photo"></div>
+  </ng-template>
+</sl-data-grid>
+```
+
+### 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
+
+```html
+<sl-data-grid rowKey="id" [rows]="feed()" [columns]="columns" highlightChanges />
+```
+
+### 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 emits loadChildren when opened, and shows the wait until they arrive.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn, GridTree } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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 };
+
+@Component({
+  selector: 'app-data-grid-tree',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Stock by location"
+      height="22rem"
+      rowKey="id"
+      [columns]="columns"
+      [expanded]="expanded"
+      [rows]="locations"
+      [tree]="tree"
+    />
+  `,
+})
+export class DataGridTree {
+  readonly locations = LOCATIONS;
+  readonly columns = COLUMNS;
+  readonly tree = TREE;
+  readonly expanded = ['reno', 'reno-a'];
+}
+```
+
+### 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="rows()"
+  [columns]="columns"
+  [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: rowsReorder 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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="rows()"
+  [columns]="columns"
+  rowsReorderable
+  (rowsReorder)="move($event)"
+/>
+```
+
+### Export and print
+
+exportCsv() on the grid (exportAs slDataGrid) 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; 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
+
+```html
+<sl-data-grid #grid="slDataGrid" rowKey="id" [rows]="shipments()" [columns]="columns" />
+<button slButton (click)="grid.exportCsv({ filename: 'shipments.csv' })">CSV</button>
+<button slButton (click)="grid.exportCsv({ rows: 'selected', bom: true })">
+  Selected, for Excel
+</button>
+<button slButton (click)="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
+
+```html
+<sl-data-grid
+  rowKey="id"
+  [rows]="shipments()"
+  [columns]="columns"
+  [(current)]="cell"
+  (currentChangeRequest)="log($event.value, $event.reason)"
+/>
+```
+
+### 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
+
+```ts
+@Component({
+  template: `<sl-data-grid aria-label="Shipments" [messages]="messages" />`,
+})
+class Shipments {
+  readonly messages: PartialMessages<DataGridMessages> = {
+    selectAllFiltered:
+      '{count, plural, one {Select the # shipment} other {Select all # shipments}}',
+  };
+}
+```
+
+### empty.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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[];
+
+@Component({
+  selector: 'app-data-grid-empty',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="18rem"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridEmpty {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+}
+```
+
+### error.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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[];
+
+@Component({
+  selector: 'app-data-grid-error',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      error="The shipments service did not answer within 30 seconds."
+      height="18rem"
+      (retry)="attempts.set(attempts() + 1)"
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridError {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly attempts = signal(0);
+}
+```
+
+### loading.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import type { GridColumn } from '@slotted/core/grid';
+import { SlDataGrid } from '@slotted/angular/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[];
+
+@Component({
+  selector: 'app-data-grid-loading',
+  imports: [SlDataGrid],
+  template: `
+    <sl-data-grid
+      aria-label="Shipments"
+      rowKey="id"
+      height="18rem"
+      loading
+      [columns]="columns"
+      [rows]="rows"
+    ></sl-data-grid>
+  `,
+})
+export class DataGridLoading {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+}
+```
+
+### shipments-workspace.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { emptyQuery, withSearch, type GridColumn, type GridQuery } from '@slotted/core/grid';
+import { SlButton } from '@slotted/angular/button';
+import { SlDataGrid, SlDataGridFooter } from '@slotted/angular/data-grid';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/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);
+
+@Component({
+  selector: 'app-data-grid-shipments-workspace',
+  imports: [
+    SlButton,
+    SlDataGrid,
+    SlDataGridFooter,
+    SlInline,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slStack [gap]="3">
+      <div slTextField clearable>
+        <input
+          slTextFieldInput
+          aria-label="Search shipments"
+          placeholder="Search by shipment, customer or destination"
+          [value]="query().search"
+          (valueChange)="search($event.value)"
+        />
+      </div>
+      <sl-data-grid
+        aria-label="Shipments"
+        rowKey="id"
+        height="26rem"
+        selectionMode="multiple"
+        [(query)]="query"
+        [(value)]="value"
+        [columns]="columns"
+        [rows]="rows"
+      >
+        <div slDataGridFooter slInline align="center" [gap]="3">
+          <span slText size="sm" tone="muted">{{ count() }} selected</span>
+          <button slButton type="button" size="sm" variant="outline" [disabled]="count() === 0">
+            Print labels
+          </button>
+        </div>
+      </sl-data-grid>
+    </div>
+  `,
+})
+export class DataGridShipmentsWorkspace {
+  readonly rows = ROWS;
+  readonly columns = COLUMNS;
+  readonly query = signal<GridQuery>(emptyQuery());
+  readonly value = signal<string | readonly string[] | null>([]);
+  readonly count = computed(() => {
+    const value = this.value();
+    return Array.isArray(value) ? value.length : 0;
+  });
+
+  search(text: string): void {
+    this.query.update((current) => withSearch(current, text).query);
+  }
+}
+```