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

package/docs/table.examples.md

@@ -0,0 +1,1981 @@
+<!-- index: ./index.md -->
+# table
+
+`data-ui="table"` · Semantic table with sorting, filters and selection.
+
+## Examples
+
+### Playground
+
+Every axis on one table, driven by the controls below the canvas. Change the variant, turn the stripes on, then narrow the window: the table scrolls inside its own frame rather than pushing the page over.
+
+Excerpt — not a complete module
+
+```html
+<div slTable [columns]="3">
+  <div slTableContent>
+    <caption slTableCaption>
+      Invoices
+    </caption>
+    <thead slTableHead>
+      <tr slTableRow>
+        <th slTableColumnHeader>Invoice</th>
+        <th slTableColumnHeader>Client</th>
+        <th slTableColumnHeader numeric>Amount</th>
+      </tr>
+    </thead>
+    <tbody slTableBody>
+      @for (invoice of invoices(); track invoice.id) {
+        <tr slTableRow [value]="invoice.id">
+          <th slTableRowHeader>{{ invoice.id }}</th>
+          <td slTableCell>{{ invoice.client }}</td>
+          <td slTableCell numeric>{{ invoice.amount }}</td>
+        </tr>
+      }
+    </tbody>
+  </div>
+</div>
+```
+
+### Nothing, a rule, or a frame
+
+Plain is the form that belongs inside a card, where the card already draws the box. Ruled puts a hairline between records. Framed is the listing screen: the set reads as one object, and the footer bar sits inside it.
+
+Excerpt — not a complete module
+
+```html
+<div slTable variant="plain"></div>
+<div slTable variant="ruled"></div>
+<div slTable variant="framed"></div>
+```
+
+### A stripe to carry the eye across
+
+Off by default, because a stripe costs a row its own state colours. It is mixed from the ink at five per cent, one step under the header band, and every state is painted over it: a striped row that is selected reads as selected.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const STOCK = [
+  { sku: 'PRD-0412', product: 'Chai', warehouse: 'Reno', onHand: 390, reserved: 42 },
+  { sku: 'PRD-0413', product: 'Chang', warehouse: 'Reno', onHand: 170, reserved: 12 },
+  { sku: 'PRD-0414', product: 'Aniseed Syrup', warehouse: 'Columbus', onHand: 130, reserved: 70 },
+  {
+    sku: 'PRD-0415',
+    product: "Chef Anton's Cajun Seasoning",
+    warehouse: 'Savannah',
+    onHand: 530,
+    reserved: 0,
+  },
+  {
+    sku: 'PRD-0416',
+    product: "Grandma's Boysenberry Spread",
+    warehouse: 'Columbus',
+    onHand: 120,
+    reserved: 25,
+  },
+  {
+    sku: 'PRD-0417',
+    product: 'Northwoods Cranberry Sauce',
+    warehouse: 'Reno',
+    onHand: 60,
+    reserved: 60,
+  },
+];
+
+@Component({
+  selector: 'app-table-striped',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="5" striped>
+      <div slTableContent aria-label="Stock on hand">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>SKU</th>
+            <th slTableColumnHeader>Product</th>
+            <th slTableColumnHeader>Warehouse</th>
+            <th slTableColumnHeader numeric>On hand</th>
+            <th slTableColumnHeader numeric>Reserved</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (item of stock; track item.sku) {
+            <tr slTableRow [value]="item.sku">
+              <th slTableRowHeader text="nowrap">{{ item.sku }}</th>
+              <td slTableCell>{{ item.product }}</td>
+              <td slTableCell>{{ item.warehouse }}</td>
+              <td slTableCell numeric>{{ item.onHand }}</td>
+              <td slTableCell numeric>{{ item.reserved }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableStriped {
+  readonly stock = STOCK;
+}
+```
+
+### Ordered by one column, and said out loud
+
+Press a header: ascending, then descending, then none. The family holds the descriptor and reorders nothing — the rows are yours — so apply it to your own array or send it to your query. The change is announced, because aria-sort alone is silent.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSort,
+  type TableSortDescriptor,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const ORDERS = [
+  { id: 'SO-10421', customer: 'Alfreds Futterkiste', placed: '2026-09-28', total: 1240 },
+  { id: 'SO-10422', customer: "Bon app'", placed: '2026-09-29', total: 860.5 },
+  { id: 'SO-10423', customer: 'Ernst Handel', placed: '2026-09-27', total: 3410.25 },
+  { id: 'SO-10424', customer: 'Folk och fä HB', placed: '2026-09-30', total: 512 },
+];
+
+type Order = (typeof ORDERS)[number];
+
+function sortOrders(rows: readonly Order[], sort: TableSortDescriptor | null): readonly Order[] {
+  if (sort === null) return rows;
+  const key = sort.column as keyof Order;
+  const sign = sort.direction === 'ascending' ? 1 : -1;
+  return [...rows].sort((a, b) =>
+    typeof a[key] === 'number'
+      ? ((a[key] as number) - (b[key] as number)) * sign
+      : String(a[key]).localeCompare(String(b[key])) * sign,
+  );
+}
+
+@Component({
+  selector: 'app-table-sorting',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSort,
+  ],
+  template: `
+    <div slTable [columns]="4" [(sort)]="sort">
+      <div slTableContent aria-label="Recent orders">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader column="id"><button slTableSort>Order</button></th>
+            <th slTableColumnHeader column="customer"><button slTableSort>Customer</button></th>
+            <th slTableColumnHeader column="placed"><button slTableSort>Placed</button></th>
+            <th slTableColumnHeader column="total" numeric><button slTableSort>Total</button></th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (order of rows(); track order.id) {
+            <tr slTableRow [value]="order.id">
+              <th slTableRowHeader text="nowrap">{{ order.id }}</th>
+              <td slTableCell>{{ order.customer }}</td>
+              <td slTableCell text="nowrap">{{ order.placed }}</td>
+              <td slTableCell numeric>{{ usd.format(order.total) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableSorting {
+  readonly sort = signal<TableSortDescriptor | null>({ column: 'placed', direction: 'descending' });
+  readonly rows = computed(() => sortOrders(ORDERS, this.sort()));
+  readonly usd = USD;
+}
+```
+
+### A filter, beside the name it filters
+
+The family draws the filter: a trigger on the column boundary and a panel that searches, covers what the search left, counts what you counted, and edits a draft. Nothing reaches you until Apply — Escape and a press outside put back the set the panel opened with. What the set means is still your query.
+
+Excerpt — not a complete module
+
+```html
+<th slTableColumnHeader column="client">
+  <button slTableSort>Client</button>
+  <span slTableColumnActions>
+    <span slTableTextFilter columnLabel="client" [(value)]="client"></span>
+  </span>
+</th>
+```
+
+### A column filtered to the values you named
+
+The set filter: a list, a search past eight values through the same locale collator Combobox uses, and a checkbox that covers exactly what the search left. Counts are yours to supply. Nothing reaches you until Apply — Escape and a press outside put back the descriptor the panel opened with — and a filtered column says what is applied in the trigger own name.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { createFilterPredicate, type SetFilter } from '@slotted/core/filter';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnActions,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSetFilter,
+} from '@slotted/angular/table';
+
+const ORDERS = [
+  { id: 'SO-10421', customer: 'Alfreds Futterkiste', warehouse: 'Reno', status: 'Shipped' },
+  { id: 'SO-10422', customer: "Bon app'", warehouse: 'Columbus', status: 'Processing' },
+  { id: 'SO-10423', customer: 'Ernst Handel', warehouse: 'Savannah', status: 'On hold' },
+  { id: 'SO-10424', customer: 'Folk och fä HB', warehouse: 'Reno', status: 'Delivered' },
+  { id: 'SO-10425', customer: 'QUICK-Stop', warehouse: 'Columbus', status: 'Shipped' },
+  { id: 'SO-10426', customer: 'Hanari Carnes', warehouse: 'Savannah', status: 'Processing' },
+];
+
+const STATUSES = ['Processing', 'On hold', 'Shipped', 'Delivered'].map((value) => ({
+  value,
+  count: ORDERS.filter((order) => order.status === value).length,
+}));
+
+@Component({
+  selector: 'app-table-filter',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnActions,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSetFilter,
+  ],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent aria-label="Open orders">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader>Warehouse</th>
+            <th slTableColumnHeader>
+              Status
+              <span slTableColumnActions>
+                <span
+                  slTableSetFilter
+                  columnLabel="status"
+                  [options]="statuses"
+                  [(value)]="status"
+                ></span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (order of rows(); track order.id) {
+            <tr slTableRow [value]="order.id">
+              <th slTableRowHeader text="nowrap">{{ order.id }}</th>
+              <td slTableCell>{{ order.customer }}</td>
+              <td slTableCell>{{ order.warehouse }}</td>
+              <td slTableCell>{{ order.status }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableFilter {
+  readonly statuses = STATUSES;
+  readonly status = signal<SetFilter | null>(null);
+  readonly rows = computed(() => {
+    const keep = createFilterPredicate(this.status());
+    return ORDERS.filter((order) => keep(order.status));
+  });
+}
+```
+
+### Four columns, four kinds, one predicate
+
+Text, number, date and boolean, each with the operators its type has and each typed as itself — a slTableTextFilter value is a TextFilter model, and you never unwrap a union to read it. createRowPredicate joins the four, so the screen filters without a switch of its own.
+
+Excerpt — not a complete module
+
+```html
+<span slTableTextFilter columnLabel="client" [(value)]="client"></span>
+<span slTableNumberFilter columnLabel="amount" [(value)]="total"></span>
+<span slTableDateFilter columnLabel="due" [(value)]="dueAt"></span>
+<span slTableBooleanFilter columnLabel="overdue" [(value)]="overdue"></span>
+```
+
+### Two conditions, and the shapes an operator makes
+
+Between takes two operands and is empty takes none, so the panel grows a field or loses both — and says so, because a form that changes shape under a reader who cannot see it says nothing otherwise. The second condition appears once the first is complete, joined by And or Or; past two, a rule set is Filter Bar work.
+
+Excerpt — not a complete module
+
+```html
+<span slTableNumberFilter columnLabel="amount" [(value)]="amount"></span>
+<span slTableTextFilter columnLabel="client" [conditions]="1" [(value)]="client"></span>
+```
+
+### A time column, and a window that crosses midnight
+
+slTableTimeFilter draws the time picker, and one time range picker for between, and holds ISO text at the column granularity — 22:00 at a minute, 22:00:00 at a second — which is the precision the engine compares at. A between whose start is later than its end is the overnight window, not an empty set: 22:00 to 02:00 keeps 23:30 and 01:15. The range picker marks that pair out of order until its wrap capability lands; the filter applies it as the window either way. Your shifts go in through presets.
+
+Excerpt — not a complete module
+
+```html
+<ng-template #shifts>
+  <button slTimeRangePickerPreset [range]="morning">Morning</button>
+</ng-template>
+<span
+  slTableTimeFilter
+  columnLabel="cut-off"
+  granularity="minute"
+  [presets]="shifts"
+  [(value)]="cutoff"
+></span>
+```
+
+### A date-time column, at the precision you wrote
+
+slTableDateTimeFilter draws the date-time picker, and one date-time range picker for between, and holds 2026-09-14T09:00 as text. Compared at the operand own precision, so after 2026-09-14T09 starts at ten o clock and is 2026-09-14 matches the whole day. A condition with one half missing is inactive until both halves exist, and Apply reports nothing for it. Your windows go in through presets.
+
+Excerpt — not a complete module
+
+```html
+<ng-template #windows>
+  <button slDateTimeRangePickerPreset [range]="earlyOctober">Early October</button>
+</ng-template>
+<span
+  slTableDateTimeFilter
+  columnLabel="scheduled"
+  timeZone="Europe/Lisbon"
+  [presets]="windows"
+  [(value)]="scheduled"
+></span>
+```
+
+### Between two dates, as one range picker
+
+The between of a date column is one date-range-picker rather than two pickers: it says the run length while it is drawn, takes the ends in either order and carries your presets as a template of slDateRangePickerPreset buttons. The descriptor is unchanged — between, an ISO day and another — so a saved view written with two pickers opens in the range picker.
+
+Excerpt — not a complete module
+
+```html
+<ng-template #presets>
+  <button slDateRangePickerPreset [range]="september">September</button>
+  <button slDateRangePickerPreset [range]="quarter">Q4</button>
+</ng-template>
+<span slTableDateFilter columnLabel="due" [presets]="presets" [(value)]="dueAt"></span>
+```
+
+### A set typed as chips
+
+operand of tags draws tags-input where the checkbox list stood, for a list too long to tick. With options, they are a native datalist of suggestions and a typed value outside them is refused; without options any value is admitted. The chips hold the same readonly string[] the list held, so the operator stays anyOf or noneOf and a saved view is read by either operand.
+
+Excerpt — not a complete module
+
+```html
+<span
+  slTableSetFilter
+  columnLabel="client"
+  operand="tags"
+  [options]="clients"
+  [(value)]="client"
+></span>
+<span slTableSetFilter columnLabel="invoice" operand="tags" [(value)]="invoice"></span>
+```
+
+### A plain control in a cell
+
+A cell whose child is a plain control gives up its inset: padding goes to zero and the control reads the cell padding and the row height through the control tokens, so the edited value stands where the read value stood and the row does not grow. The rule names the fourteen plain field families and nothing else. The control width is its own, as in a form.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';
+import { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const BINS = ['A-04', 'A-07', 'B-12', 'C-01'];
+
+const STOCK = [
+  { sku: 'PRD-0412', product: 'Chai', counted: 390, bin: 'A-04' },
+  { sku: 'PRD-0413', product: 'Chang', counted: 170, bin: 'A-04' },
+  { sku: 'PRD-0414', product: 'Aniseed Syrup', counted: 130, bin: 'B-12' },
+  { sku: 'PRD-0415', product: "Chef Anton's Cajun Seasoning", counted: 53, bin: 'C-01' },
+];
+
+type Line = (typeof STOCK)[number];
+
+@Component({
+  selector: 'app-table-editing',
+  imports: [
+    SlNumberField,
+    SlNumberFieldInput,
+    SlSelect,
+    SlSelectItem,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent aria-label="Stock take, Reno">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>SKU</th>
+            <th slTableColumnHeader>Product</th>
+            <th slTableColumnHeader numeric>Counted</th>
+            <th slTableColumnHeader>Bin</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (line of lines(); track line.sku) {
+            <tr slTableRow [value]="line.sku">
+              <th slTableRowHeader text="nowrap">{{ line.sku }}</th>
+              <td slTableCell>{{ line.product }}</td>
+              <td slTableCell numeric>
+                <div slNumberField size="sm" stepper="none" variant="plain">
+                  <input
+                    slNumberFieldInput
+                    min="0"
+                    [attr.aria-label]="'Counted for ' + line.sku"
+                    [value]="line.counted"
+                    (valueChange)="update(line.sku, { counted: $event.value ?? 0 })"
+                  />
+                </div>
+              </td>
+              <td slTableCell>
+                <sl-select
+                  size="sm"
+                  variant="plain"
+                  [aria-label]="'Bin of ' + line.sku"
+                  [value]="line.bin"
+                  (valueChange)="setBin(line.sku, $event)"
+                >
+                  @for (bin of bins; track bin) {
+                    <sl-select-item [value]="bin">{{ bin }}</sl-select-item>
+                  }
+                </sl-select>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableEditing {
+  readonly bins = BINS;
+  readonly lines = signal<readonly Line[]>(STOCK);
+
+  setBin(sku: string, bin: SelectSelection): void {
+    if (typeof bin === 'string') this.update(sku, { bin });
+  }
+
+  update(sku: string, change: Partial<Line>): void {
+    this.lines.update((current) =>
+      current.map((line) => (line.sku === sku ? { ...line, ...change } : line)),
+    );
+  }
+}
+```
+
+### Choosing records, and what all means
+
+Hold Shift and press a second checkbox to take everything between. The header checkbox covers the rows in the DOM and says how many in its own name — a selection over a whole result set is a decision only your query can make.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableFooter,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSelect,
+  SlTableSelectAll,
+} from '@slotted/angular/table';
+import { SlText } from '@slotted/angular/typography';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const INVOICES = [
+  { id: 'INV-2041', customer: 'Alfreds Futterkiste', status: 'Overdue', amount: 1240 },
+  { id: 'INV-2042', customer: 'Great Lakes Food Market', status: 'Overdue', amount: 18402.75 },
+  { id: 'INV-2043', customer: 'Hanari Carnes', status: 'Draft', amount: 86.4 },
+  { id: 'INV-2044', customer: 'Island Trading', status: 'Sent', amount: 2310 },
+  { id: 'INV-2045', customer: 'Lonesome Pine Restaurant', status: 'Sent', amount: 645.2 },
+];
+
+@Component({
+  selector: 'app-table-selection',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableFooter,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSelect,
+    SlTableSelectAll,
+    SlText,
+  ],
+  template: `
+    <div slTable [columns]="5" selectionMode="multiple" [(value)]="chosen">
+      <div slTableContent aria-label="Invoices to send reminders for">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableSelectAll></th>
+            <th slTableColumnHeader>Invoice</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader>Status</th>
+            <th slTableColumnHeader numeric>Amount</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (invoice of invoices; track invoice.id) {
+            <tr slTableRow [value]="invoice.id" [disabled]="invoice.status === 'Draft'">
+              <td slTableSelect></td>
+              <th slTableRowHeader text="nowrap">{{ invoice.id }}</th>
+              <td slTableCell>{{ invoice.customer }}</td>
+              <td slTableCell>{{ invoice.status }}</td>
+              <td slTableCell numeric>{{ usd.format(invoice.amount) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+      <div slTableFooter>
+        <span slText size="sm" tone="muted"
+          >{{ chosen().length }} selected · {{ usd.format(total()) }}</span
+        >
+      </div>
+    </div>
+  `,
+})
+export class TableSelection {
+  readonly invoices = INVOICES;
+  readonly usd = USD;
+  readonly chosen = signal<readonly string[]>(['INV-2041']);
+  readonly total = computed(() =>
+    INVOICES.filter((invoice) => this.chosen().includes(invoice.id)).reduce(
+      (sum, invoice) => sum + invoice.amount,
+      0,
+    ),
+  );
+}
+```
+
+### A record with more to say
+
+The expander is the Disclosure pattern: a button carrying aria-expanded and naming the row it opens. Control flow in the template keeps a closed detail out of the DOM, which is the one asymmetry with React and belongs to the frameworks rather than the family.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableDetail,
+  SlTableExpander,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const RETURNS = [
+  {
+    id: 'RMA-0811',
+    order: 'SO-10398',
+    customer: 'Ernst Handel',
+    refund: 214.5,
+    detail:
+      'Two cases of Chang arrived crushed. Carrier claim filed with UPS on Sep 24; refund issued to the original card.',
+  },
+  {
+    id: 'RMA-0812',
+    order: 'SO-10402',
+    customer: 'QUICK-Stop',
+    refund: 58,
+    detail:
+      'Wrong flavour shipped. Replacement sent from Columbus; the returned jar goes back to stock after inspection.',
+  },
+  {
+    id: 'RMA-0813',
+    order: 'SO-10407',
+    customer: 'Hanari Carnes',
+    refund: 1120,
+    detail:
+      'Order cancelled after dispatch. Pallet returned to Savannah unopened; restocking fee waived by account manager.',
+  },
+];
+
+@Component({
+  selector: 'app-table-expansion',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableDetail,
+    SlTableExpander,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="5" [(expanded)]="expanded">
+      <div slTableContent aria-label="Returns">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader></th>
+            <th slTableColumnHeader>Return</th>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader numeric>Refund</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (item of returns; track item.id) {
+            <tr slTableRow [value]="item.id" #row="slTableRow">
+              <td slTableCell><button slTableExpander></button></td>
+              <th slTableRowHeader text="nowrap">{{ item.id }}</th>
+              <td slTableCell>{{ item.order }}</td>
+              <td slTableCell>{{ item.customer }}</td>
+              <td slTableCell numeric>{{ usd.format(item.refund) }}</td>
+            </tr>
+            @if (row.expanded()) {
+              <tr slTableDetail [value]="item.id">
+                {{
+                  item.detail
+                }}
+              </tr>
+            }
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableExpansion {
+  readonly returns = RETURNS;
+  readonly usd = USD;
+  readonly expanded = signal<readonly string[]>(['RMA-0811']);
+}
+```
+
+### A header, a summary and a column that stay
+
+stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSummary,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+  'Wartian Herkku',
+];
+const WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];
+
+const ORDERS = Array.from({ length: 30 }, (_, index) => ({
+  id: `SO-${10400 + index}`,
+  customer: CUSTOMERS[index % CUSTOMERS.length],
+  warehouse: WAREHOUSES[index % WAREHOUSES.length],
+  total: 180 + ((index * 397) % 2400),
+}));
+
+@Component({
+  selector: 'app-table-sticky',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSummary,
+  ],
+  template: `
+    <div slTable [columns]="4" stickyFooter stickyHeader>
+      <div slTableContent aria-label="September orders" style="max-block-size: 20rem">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader>Warehouse</th>
+            <th slTableColumnHeader numeric>Total</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (order of orders; track order.id) {
+            <tr slTableRow [value]="order.id">
+              <th slTableRowHeader text="nowrap">{{ order.id }}</th>
+              <td slTableCell>{{ order.customer }}</td>
+              <td slTableCell>{{ order.warehouse }}</td>
+              <td slTableCell numeric>{{ usd.format(order.total) }}</td>
+            </tr>
+          }
+        </tbody>
+        <tfoot slTableSummary>
+          <tr slTableRow>
+            <td slTableCell [attr.colspan]="3">{{ orders.length }} orders</td>
+            <td slTableCell numeric>{{ usd.format(total) }}</td>
+          </tr>
+        </tfoot>
+      </div>
+    </div>
+  `,
+})
+export class TableSticky {
+  readonly orders = ORDERS;
+  readonly total = ORDERS.reduce((sum, order) => sum + order.total, 0);
+  readonly usd = USD;
+}
+```
+
+### Wider than the space it has
+
+The scroller takes a tab stop, a role and a name only while it overflows, so a table that fits costs a keyboard reader nothing. Tab to it and the arrow keys, Page keys, Home and End all scroll it.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const SHIPMENTS = [
+  {
+    id: 'SH-3301',
+    order: 'SO-10421',
+    customer: 'Alfreds Futterkiste',
+    origin: 'Reno, NV',
+    destination: 'Berlin, DE',
+    carrier: 'UPS Worldwide',
+    shipped: 'Sep 28, 2026',
+    cost: 412.8,
+  },
+  {
+    id: 'SH-3302',
+    order: 'SO-10422',
+    customer: "Bon app'",
+    origin: 'Columbus, OH',
+    destination: 'Marseille, FR',
+    carrier: 'FedEx International',
+    shipped: 'Sep 29, 2026',
+    cost: 288.15,
+  },
+  {
+    id: 'SH-3303',
+    order: 'SO-10423',
+    customer: 'Ernst Handel',
+    origin: 'Savannah, GA',
+    destination: 'Graz, AT',
+    carrier: 'DHL Express',
+    shipped: 'Sep 29, 2026',
+    cost: 506.4,
+  },
+  {
+    id: 'SH-3304',
+    order: 'SO-10425',
+    customer: 'QUICK-Stop',
+    origin: 'Columbus, OH',
+    destination: 'Cunewalde, DE',
+    carrier: 'UPS Worldwide',
+    shipped: 'Sep 30, 2026',
+    cost: 347.9,
+  },
+];
+
+@Component({
+  selector: 'app-table-scroll',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="8">
+      <div slTableContent aria-label="International shipments">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader sticky="start" text="nowrap">Shipment</th>
+            <th slTableColumnHeader text="nowrap">Order</th>
+            <th slTableColumnHeader text="nowrap">Customer</th>
+            <th slTableColumnHeader text="nowrap">Origin</th>
+            <th slTableColumnHeader text="nowrap">Destination</th>
+            <th slTableColumnHeader text="nowrap">Carrier</th>
+            <th slTableColumnHeader text="nowrap">Shipped</th>
+            <th slTableColumnHeader numeric text="nowrap">Cost</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (shipment of shipments; track shipment.id) {
+            <tr slTableRow [value]="shipment.id">
+              <th slTableRowHeader sticky="start" text="nowrap">{{ shipment.id }}</th>
+              <td slTableCell text="nowrap">{{ shipment.order }}</td>
+              <td slTableCell text="nowrap">{{ shipment.customer }}</td>
+              <td slTableCell text="nowrap">{{ shipment.origin }}</td>
+              <td slTableCell text="nowrap">{{ shipment.destination }}</td>
+              <td slTableCell text="nowrap">{{ shipment.carrier }}</td>
+              <td slTableCell text="nowrap">{{ shipment.shipped }}</td>
+              <td slTableCell numeric>{{ usd.format(shipment.cost) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableScroll {
+  readonly shipments = SHIPMENTS;
+  readonly usd = USD;
+}
+```
+
+### Where a value stands, and how its digits line up
+
+Alignment is logical, so a column aligned to the end is on the right in English and on the left in Arabic. Numeric is a separate fact: it sets tabular figures, and aligns to the end unless you say otherwise.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const INVOICES = [
+  { id: 'INV-2041', customer: 'Alfreds Futterkiste', region: 'EU', due: 'Oct 4', amount: 1240 },
+  {
+    id: 'INV-2042',
+    customer: 'Great Lakes Food Market',
+    region: 'NA',
+    due: 'Oct 9',
+    amount: 18402.75,
+  },
+  { id: 'INV-2043', customer: 'Hanari Carnes', region: 'SA', due: 'Oct 12', amount: 86.4 },
+];
+
+@Component({
+  selector: 'app-table-alignment',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent aria-label="Invoices due">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader align="center">Region</th>
+            <th slTableColumnHeader align="end">Due</th>
+            <th slTableColumnHeader numeric>Amount</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (invoice of invoices; track invoice.id) {
+            <tr slTableRow [value]="invoice.id">
+              <th slTableRowHeader>{{ invoice.customer }}</th>
+              <td slTableCell align="center">{{ invoice.region }}</td>
+              <td slTableCell align="end">{{ invoice.due }}</td>
+              <td slTableCell numeric>{{ usd.format(invoice.amount) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableAlignment {
+  readonly invoices = INVOICES;
+  readonly usd = USD;
+}
+```
+
+### A value longer than its column
+
+Wrap breaks an unbroken token — a hash, a URL, an identifier — rather than letting it set the column width. Truncate keeps one line with the whole value still in the DOM. Nowrap never breaks. None of the three removes anything.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const NOTES = [
+  {
+    id: 'SO-10421',
+    note: 'Leave at the loading dock behind the warehouse; the front office closes at noon on Fridays.',
+    tracking: '1Z999AA10123456784',
+  },
+  {
+    id: 'SO-10422',
+    note: 'Customer asked for the invoice to be emailed to accounts payable rather than printed.',
+    tracking: '1Z999AA10123456785',
+  },
+];
+
+@Component({
+  selector: 'app-table-text',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="3" layout="fixed">
+      <div slTableContent aria-label="Delivery notes">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Note</th>
+            <th slTableColumnHeader>Tracking</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (row of notes; track row.id) {
+            <tr slTableRow [value]="row.id">
+              <th slTableRowHeader text="nowrap">{{ row.id }}</th>
+              <td slTableCell text="truncate">{{ row.note }}</td>
+              <td slTableCell text="wrap">{{ row.tracking }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableText {
+  readonly notes = NOTES;
+}
+```
+
+### The totals, and the page
+
+Two different feet. The summary is a tfoot inside the table, where a total belongs beside the column it totals. The footer is a bar outside it and inside the frame, which is where the paging control goes and where it does not scroll sideways.
+
+Excerpt — not a complete module
+
+```html
+<div slTable>
+  <div slTableContent [totalRowCount]="128">
+    <tfoot slTableSummary>
+      <tr slTableRow>
+        <td slTableCell numeric>11,061.25</td>
+      </tr>
+    </tfoot>
+  </div>
+  <div slTableFooter>
+    <span>3 of 128 invoices</span>
+    <nav slPagination [count]="128" [pageSize]="3"></nav>
+  </div>
+</div>
+```
+
+### Nothing yet, nothing at all, and something arriving
+
+A first load draws skeleton rows, so the shape is visible before the content. A refresh over rows already read writes aria-busy and dims them without moving anything — a reader looking at row forty stays there.
+
+Excerpt — not a complete module
+
+```html
+@if (loading() && rows().length === 0) {
+  <tbody slTableLoader [skeletonRows]="5"></tbody>
+} @else if (rows().length === 0) {
+  <tbody slTableBody>
+    <tr slTableRow>
+      <td slTableEmpty>
+        <section slResultState status="no-results"></section>
+      </td>
+    </tr>
+  </tbody>
+} @else {
+  <tbody slTableBody></tbody>
+}
+```
+
+### The same table, three sizes
+
+The row reads the control height, the cell reads the control inset and the type reads the control step, so one theme decision retunes the rows, the buttons and the fields together. Density changes the size and never the meaning.
+
+Excerpt — not a complete module
+
+```html
+<div data-slotted-density="dense">
+  <div slTable></div>
+</div>
+```
+
+### Content the table did not choose
+
+A forty-character identifier, a translated header twice as long as its English, a cell holding a tag and a link. The table is a grid of your own content, so the parts hold whatever a record needs rather than a string.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlAvatar } from '@slotted/angular/avatar';
+import { SlInline } from '@slotted/angular/inline';
+import { SlLink } from '@slotted/angular/link';
+import { SlStatusIndicator } from '@slotted/angular/status-indicator';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const ACCOUNTS = [
+  {
+    id: 'ALFKI',
+    name: 'Alfreds Futterkiste',
+    manager: 'Nancy Davolio',
+    sync: 'success',
+    syncLabel: 'In sync',
+    balance: 1240,
+  },
+  {
+    id: 'ERNSH',
+    name: 'Ernst Handel',
+    manager: 'Andrew Fuller',
+    sync: 'warning',
+    syncLabel: 'Delayed',
+    balance: 3410.25,
+  },
+  {
+    id: 'QUICK',
+    name: 'QUICK-Stop',
+    manager: 'Janet Leverling',
+    sync: 'danger',
+    syncLabel: 'Failed',
+    balance: 2088.9,
+  },
+] as const;
+
+@Component({
+  selector: 'app-table-content',
+  imports: [
+    SlAvatar,
+    SlInline,
+    SlLink,
+    SlStatusIndicator,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent aria-label="Key accounts">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Account</th>
+            <th slTableColumnHeader>Account manager</th>
+            <th slTableColumnHeader>ERP sync</th>
+            <th slTableColumnHeader numeric>Balance</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (account of accounts; track account.id) {
+            <tr slTableRow [value]="account.id">
+              <th slTableRowHeader text="nowrap">
+                <a slLink [href]="'#' + account.id">{{ account.name }}</a>
+              </th>
+              <td slTableCell text="nowrap">
+                <div slInline align="center" [gap]="2">
+                  <span slAvatar size="sm" [name]="account.manager"></span>
+                  {{ account.manager }}
+                </div>
+              </td>
+              <td slTableCell text="nowrap">
+                <span slStatusIndicator [status]="account.sync">{{ account.syncLabel }}</span>
+              </td>
+              <td slTableCell numeric>{{ usd.format(account.balance) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableContentExample {
+  readonly accounts = ACCOUNTS;
+  readonly usd = USD;
+}
+```
+
+### The screen this is reached for
+
+Sorting, selection with a bulk action, a filter in a header, an identifier pinned at the start and actions pinned at the end, a paging control in the footer. Every piece beside the table is another family, composed rather than built in.
+
+Excerpt — not a complete module
+
+```html
+<div
+  slTable
+  variant="framed"
+  stickyHeader
+  selectionMode="multiple"
+  [columns]="5"
+  [(value)]="chosen"
+  [(sort)]="sort"
+>
+  <div slTableContent [totalRowCount]="128"></div>
+  <div slTableFooter>
+    <nav slPagination [count]="128"></nav>
+  </div>
+</div>
+```
+
+### Setting the table once, and reaching past it
+
+provideTableDefaults sets the frame and the layout for everything under that injector, provideSlotted the language, and a table that states an axis itself still wins. Every part is a directive on your own element, so nothing is wrapped that you did not write.
+
+Excerpt — not a complete module
+
+```ts
+bootstrapApplication(App, {
+  providers: [
+    provideTableDefaults({
+      variant: 'framed',
+      stickyHeader: true,
+    }),
+  ],
+});
+```
+
+### Every control is its own tab stop
+
+A table is not a composite widget, so the table binds no key: Tab reaches the scroller, then each sort button, checkbox and expander in DOM order. Shift with Space on a checkbox takes the range, which is the one gesture the family adds.
+
+Excerpt — not a complete module
+
+```html
+<!-- Enter and Space activate the buttons the table renders. -->
+<!-- Shift + Space on a row checkbox selects from the anchor. -->
+<!-- The scroller answers the arrow, Page, Home and End keys. -->
+```
+
+### What a reader hears
+
+The caption names the table, scope ties every value to its column and its record, aria-sort says the order and the announcer says it changed. A paged table states aria-rowcount so row three of twenty is row three of four hundred.
+
+Excerpt — not a complete module
+
+```html
+<div slTableContent [totalRowCount]="412">
+  <tbody slTableBody>
+    <tr slTableRow value="INV-1042" [rowIndex]="41">
+      <th slTableRowHeader>INV-1042</th>
+    </tr>
+  </tbody>
+</div>
+```
+
+### empty.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlResultState,
+  SlResultStateContent,
+  SlResultStateDescription,
+  SlResultStateTitle,
+} from '@slotted/angular/result-state';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableEmpty,
+  SlTableHead,
+  SlTableRow,
+} from '@slotted/angular/table';
+
+@Component({
+  selector: 'app-table-empty',
+  imports: [
+    SlResultState,
+    SlResultStateContent,
+    SlResultStateDescription,
+    SlResultStateTitle,
+    SlTable,
+    SlTableBody,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableEmpty,
+    SlTableHead,
+    SlTableRow,
+  ],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent aria-label="Returns this week">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Return</th>
+            <th slTableColumnHeader>Order</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader numeric>Refund</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          <tr slTableRow>
+            <td slTableEmpty>
+              <section slResultState status="empty">
+                <div slResultStateContent>
+                  <h3 slResultStateTitle>No returns this week</h3>
+                  <p slResultStateDescription>
+                    Returns appear here as soon as a customer opens one from their order page.
+                  </p>
+                </div>
+              </section>
+            </td>
+          </tr>
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableEmptyExample {}
+```
+
+### loading.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import {
+  SlTable,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableLoader,
+  SlTableRow,
+} from '@slotted/angular/table';
+
+@Component({
+  selector: 'app-table-loading',
+  imports: [SlTable, SlTableColumnHeader, SlTableContent, SlTableHead, SlTableLoader, SlTableRow],
+  template: `
+    <div slTable [columns]="4">
+      <div slTableContent aria-label="Purchase orders">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Purchase order</th>
+            <th slTableColumnHeader>Supplier</th>
+            <th slTableColumnHeader>Expected</th>
+            <th slTableColumnHeader numeric>Value</th>
+          </tr>
+        </thead>
+        <tbody slTableLoader [skeletonRows]="4"></tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableLoading {}
+```
+
+### orders-list.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { createFilterPredicate, type SetFilter } from '@slotted/core/filter';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import {
+  SlPagination,
+  SlPaginationItems,
+  SlPaginationNext,
+  SlPaginationPrevious,
+} from '@slotted/angular/pagination';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnActions,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableFooter,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSelect,
+  SlTableSelectAll,
+  SlTableSetFilter,
+  SlTableSort,
+  type TableSortDescriptor,
+} from '@slotted/angular/table';
+import { SlText } from '@slotted/angular/typography';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+];
+const STATUS_CYCLE = ['Processing', 'Shipped', 'On hold', 'Delivered', 'Processing'];
+
+const ORDERS = Array.from({ length: 20 }, (_, index) => ({
+  id: `SO-${10421 + index}`,
+  customer: CUSTOMERS[index % CUSTOMERS.length],
+  status: STATUS_CYCLE[index % STATUS_CYCLE.length],
+  total: 140 + ((index * 733) % 4100),
+}));
+
+type Order = (typeof ORDERS)[number];
+
+const STATUSES = ['Processing', 'On hold', 'Shipped', 'Delivered'].map((value) => ({
+  value,
+  count: ORDERS.filter((order) => order.status === value).length,
+}));
+
+const PAGE_SIZE = 6;
+
+function sortOrders(rows: readonly Order[], sort: TableSortDescriptor | null): readonly Order[] {
+  if (sort === null) return rows;
+  const key = sort.column as keyof Order;
+  const sign = sort.direction === 'ascending' ? 1 : -1;
+  return [...rows].sort((a, b) =>
+    typeof a[key] === 'number'
+      ? ((a[key] as number) - (b[key] as number)) * sign
+      : String(a[key]).localeCompare(String(b[key])) * sign,
+  );
+}
+
+@Component({
+  selector: 'app-table-orders-list',
+  imports: [
+    SlButton,
+    SlInline,
+    SlPagination,
+    SlPaginationItems,
+    SlPaginationNext,
+    SlPaginationPrevious,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnActions,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableFooter,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSelect,
+    SlTableSelectAll,
+    SlTableSetFilter,
+    SlTableSort,
+    SlText,
+  ],
+  template: `
+    <div slTable [columns]="5" selectionMode="multiple" [(sort)]="sort" [(value)]="chosen">
+      <div slTableContent aria-label="Orders" [totalRowCount]="matching().length">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableSelectAll></th>
+            <th slTableColumnHeader column="id"><button slTableSort>Order</button></th>
+            <th slTableColumnHeader column="customer"><button slTableSort>Customer</button></th>
+            <th slTableColumnHeader>
+              Status
+              <span slTableColumnActions>
+                <span
+                  slTableSetFilter
+                  columnLabel="status"
+                  [options]="statuses"
+                  [value]="status()"
+                  (valueChange)="filter($event)"
+                ></span>
+              </span>
+            </th>
+            <th slTableColumnHeader column="total" numeric><button slTableSort>Total</button></th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (order of rows(); track order.id; let index = $index) {
+            <tr slTableRow [value]="order.id" [rowIndex]="first() + index + 1">
+              <td slTableSelect></td>
+              <th slTableRowHeader text="nowrap">{{ order.id }}</th>
+              <td slTableCell>{{ order.customer }}</td>
+              <td slTableCell>{{ order.status }}</td>
+              <td slTableCell numeric>{{ usd.format(order.total) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+      <div slTableFooter>
+        <div slInline align="center" [gap]="3">
+          <span slText size="sm" tone="muted">{{ chosen().length }} selected</span>
+          <button
+            slButton
+            type="button"
+            size="sm"
+            variant="outline"
+            [disabled]="chosen().length === 0"
+          >
+            Print packing slips
+          </button>
+        </div>
+        <nav
+          slPagination
+          [count]="matching().length"
+          [page]="page()"
+          [pageSize]="pageSize"
+          (pageChange)="page.set($event.value)"
+        >
+          <button slPaginationPrevious type="button"></button>
+          <sl-pagination-items></sl-pagination-items>
+          <button slPaginationNext type="button"></button>
+        </nav>
+      </div>
+    </div>
+  `,
+})
+export class TableOrdersList {
+  readonly statuses = STATUSES;
+  readonly pageSize = PAGE_SIZE;
+  readonly usd = USD;
+  readonly sort = signal<TableSortDescriptor | null>({ column: 'id', direction: 'descending' });
+  readonly status = signal<SetFilter | null>(null);
+  readonly chosen = signal<readonly string[]>([]);
+  readonly page = signal(1);
+
+  readonly matching = computed(() => {
+    const keep = createFilterPredicate(this.status());
+    return sortOrders(
+      ORDERS.filter((order) => keep(order.status)),
+      this.sort(),
+    );
+  });
+  readonly first = computed(() => (this.page() - 1) * PAGE_SIZE);
+  readonly rows = computed(() => this.matching().slice(this.first(), this.first() + PAGE_SIZE));
+
+  filter(next: SetFilter | null): void {
+    this.status.set(next);
+    this.page.set(1);
+  }
+}
+```
+
+### pagination.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import {
+  SlPagination,
+  SlPaginationItems,
+  SlPaginationNext,
+  SlPaginationPrevious,
+} from '@slotted/angular/pagination';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableFooter,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+import { SlText } from '@slotted/angular/typography';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const CUSTOMERS = [
+  'Alfreds Futterkiste',
+  "Bon app'",
+  'Ernst Handel',
+  'Folk och fä HB',
+  'Hanari Carnes',
+  'Island Trading',
+  'QUICK-Stop',
+];
+
+const INVOICES = Array.from({ length: 23 }, (_, index) => ({
+  id: `INV-${2041 + index}`,
+  customer: CUSTOMERS[index % CUSTOMERS.length],
+  amount: 120 + ((index * 613) % 3900),
+}));
+
+const PAGE_SIZE = 5;
+
+@Component({
+  selector: 'app-table-pagination',
+  imports: [
+    SlPagination,
+    SlPaginationItems,
+    SlPaginationNext,
+    SlPaginationPrevious,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableFooter,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlText,
+  ],
+  template: `
+    <div slTable [columns]="3">
+      <div slTableContent aria-label="Invoices" [totalRowCount]="invoices.length">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader>Invoice</th>
+            <th slTableColumnHeader>Customer</th>
+            <th slTableColumnHeader numeric>Amount</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (invoice of rows(); track invoice.id; let index = $index) {
+            <tr slTableRow [value]="invoice.id" [rowIndex]="first() + index + 1">
+              <th slTableRowHeader text="nowrap">{{ invoice.id }}</th>
+              <td slTableCell>{{ invoice.customer }}</td>
+              <td slTableCell numeric>{{ usd.format(invoice.amount) }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+      <div slTableFooter>
+        <span slText size="sm" tone="muted"
+          >{{ first() + 1 }}–{{ first() + rows().length }} of {{ invoices.length }}</span
+        >
+        <nav
+          slPagination
+          [count]="invoices.length"
+          [page]="page()"
+          [pageSize]="pageSize"
+          (pageChange)="page.set($event.value)"
+        >
+          <button slPaginationPrevious type="button"></button>
+          <sl-pagination-items></sl-pagination-items>
+          <button slPaginationNext type="button"></button>
+        </nav>
+      </div>
+    </div>
+  `,
+})
+export class TablePagination {
+  readonly invoices = INVOICES;
+  readonly pageSize = PAGE_SIZE;
+  readonly usd = USD;
+  readonly page = signal(1);
+  readonly first = computed(() => (this.page() - 1) * PAGE_SIZE);
+  readonly rows = computed(() => INVOICES.slice(this.first(), this.first() + PAGE_SIZE));
+}
+```
+
+### refreshing.ts
+
+Example
+
+```ts
+import { Component, DestroyRef, inject, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });
+
+const PURCHASE_ORDERS = [
+  { id: 'PO-7710', supplier: 'Exotic Liquids', expected: 'Oct 3', value: 4120 },
+  { id: 'PO-7711', supplier: 'Tokyo Traders', expected: 'Oct 6', value: 2875.5 },
+  { id: 'PO-7712', supplier: 'Pavlova, Ltd.', expected: 'Oct 8', value: 9310 },
+];
+
+@Component({
+  selector: 'app-table-refreshing',
+  imports: [
+    SlButton,
+    SlStack,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slStack align="start" [gap]="3">
+      <button
+        slButton
+        type="button"
+        size="sm"
+        variant="outline"
+        [loading]="loading()"
+        (click)="refresh()"
+      >
+        Refresh
+      </button>
+      <div slTable [columns]="4" [loading]="loading()">
+        <div slTableContent aria-label="Purchase orders">
+          <thead slTableHead>
+            <tr slTableRow>
+              <th slTableColumnHeader>Purchase order</th>
+              <th slTableColumnHeader>Supplier</th>
+              <th slTableColumnHeader>Expected</th>
+              <th slTableColumnHeader numeric>Value</th>
+            </tr>
+          </thead>
+          <tbody slTableBody>
+            @for (order of orders; track order.id) {
+              <tr slTableRow [value]="order.id">
+                <th slTableRowHeader text="nowrap">{{ order.id }}</th>
+                <td slTableCell>{{ order.supplier }}</td>
+                <td slTableCell>{{ order.expected }}</td>
+                <td slTableCell numeric>{{ usd.format(order.value) }}</td>
+              </tr>
+            }
+          </tbody>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TableRefreshing {
+  readonly orders = PURCHASE_ORDERS;
+  readonly usd = USD;
+  readonly loading = signal(false);
+  private timer: ReturnType<typeof setTimeout> | undefined;
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+  }
+
+  refresh(): void {
+    this.loading.set(true);
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.loading.set(false), 1500);
+  }
+}
+```
+
+### single-selection.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+  SlTableSelect,
+} from '@slotted/angular/table';
+
+const RATES = [
+  { id: 'ups-ground', carrier: 'UPS Ground', days: '3–5 days', price: '$18.40' },
+  { id: 'fedex-2day', carrier: 'FedEx 2Day', days: '2 days', price: '$31.15' },
+  { id: 'usps-priority', carrier: 'USPS Priority', days: '1–3 days', price: '$24.90' },
+];
+
+@Component({
+  selector: 'app-table-single-selection',
+  imports: [
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTableSelect,
+  ],
+  template: `
+    <div slTable [columns]="4" selectionMode="single" [(value)]="rate">
+      <div slTableContent aria-label="Shipping rates for SO-10423">
+        <thead slTableHead>
+          <tr slTableRow>
+            <th slTableColumnHeader></th>
+            <th slTableColumnHeader>Carrier</th>
+            <th slTableColumnHeader>Transit</th>
+            <th slTableColumnHeader numeric>Price</th>
+          </tr>
+        </thead>
+        <tbody slTableBody>
+          @for (option of rates; track option.id) {
+            <tr slTableRow [value]="option.id">
+              <td slTableSelect></td>
+              <th slTableRowHeader>{{ option.carrier }}</th>
+              <td slTableCell>{{ option.days }}</td>
+              <td slTableCell numeric>{{ option.price }}</td>
+            </tr>
+          }
+        </tbody>
+      </div>
+    </div>
+  `,
+})
+export class TableSingleSelection {
+  readonly rates = RATES;
+  readonly rate = signal<readonly string[]>(['ups-ground']);
+}
+```
+
+### variants.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCaption,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+
+const SHIPMENTS = [
+  { id: 'SH-3301', carrier: 'UPS Ground', cartons: 12 },
+  { id: 'SH-3302', carrier: 'FedEx Express', cartons: 3 },
+  { id: 'SH-3303', carrier: 'USPS Priority', cartons: 1 },
+];
+
+const VARIANTS = [
+  { variant: 'plain', caption: 'Plain: inside a card that already draws the box' },
+  { variant: 'ruled', caption: 'Ruled: the default, a rule between rows' },
+  { variant: 'framed', caption: 'Framed: the table is its own panel' },
+] as const;
+
+@Component({
+  selector: 'app-table-variants',
+  imports: [
+    SlStack,
+    SlTable,
+    SlTableBody,
+    SlTableCaption,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+  ],
+  template: `
+    <div slStack [gap]="6">
+      @for (item of variants; track item.variant) {
+        <div slTable [columns]="3" [variant]="item.variant">
+          <div slTableContent>
+            <caption slTableCaption>
+              {{
+                item.caption
+              }}
+            </caption>
+            <thead slTableHead>
+              <tr slTableRow>
+                <th slTableColumnHeader>Shipment</th>
+                <th slTableColumnHeader>Carrier</th>
+                <th slTableColumnHeader numeric>Cartons</th>
+              </tr>
+            </thead>
+            <tbody slTableBody>
+              @for (shipment of shipments; track shipment.id) {
+                <tr slTableRow [value]="shipment.id">
+                  <th slTableRowHeader>{{ shipment.id }}</th>
+                  <td slTableCell>{{ shipment.carrier }}</td>
+                  <td slTableCell numeric>{{ shipment.cartons }}</td>
+                </tr>
+              }
+            </tbody>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TableVariants {
+  readonly shipments = SHIPMENTS;
+  readonly variants = VARIANTS;
+}
+```