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

package/dist/docs/table.examples.md

@@ -0,0 +1,1706 @@
+<!-- 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
+
+```tsx
+<Table columns={3}>
+  <TableContent>
+    <TableCaption>Invoices</TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableColumnHeader>Invoice</TableColumnHeader>
+        <TableColumnHeader>Client</TableColumnHeader>
+        <TableColumnHeader numeric>Amount</TableColumnHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {invoices.map((invoice) => (
+        <TableRow key={invoice.id} value={invoice.id}>
+          <TableRowHeader>{invoice.id}</TableRowHeader>
+          <TableCell>{invoice.client}</TableCell>
+          <TableCell numeric>{invoice.amount}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </TableContent>
+</Table>;
+```
+
+### 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
+
+```tsx
+<Table variant="plain" />;
+<Table variant="ruled" />;
+<Table variant="framed" />;
+```
+
+### 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
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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,
+  },
+];
+
+export default function TableStriped() {
+  return (
+    <Table columns={5} striped>
+      <TableContent aria-label="Stock on hand">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>SKU</TableColumnHeader>
+            <TableColumnHeader>Product</TableColumnHeader>
+            <TableColumnHeader>Warehouse</TableColumnHeader>
+            <TableColumnHeader numeric>On hand</TableColumnHeader>
+            <TableColumnHeader numeric>Reserved</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {STOCK.map((item) => (
+            <TableRow key={item.sku} value={item.sku}>
+              <TableRowHeader text="nowrap">{item.sku}</TableRowHeader>
+              <TableCell>{item.product}</TableCell>
+              <TableCell>{item.warehouse}</TableCell>
+              <TableCell numeric>{item.onHand}</TableCell>
+              <TableCell numeric>{item.reserved}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { useMemo, useState } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+  TableSort,
+  type TableSortDescriptor,
+} from '@slotted/react/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,
+  );
+}
+
+export default function TableSorting() {
+  const [sort, setSort] = useState<TableSortDescriptor | null>({
+    column: 'placed',
+    direction: 'descending',
+  });
+  const rows = useMemo(() => sortOrders(ORDERS, sort), [sort]);
+
+  return (
+    <Table columns={4} onSortChange={setSort} sort={sort}>
+      <TableContent aria-label="Recent orders">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader column="id">
+              <TableSort>Order</TableSort>
+            </TableColumnHeader>
+            <TableColumnHeader column="customer">
+              <TableSort>Customer</TableSort>
+            </TableColumnHeader>
+            <TableColumnHeader column="placed">
+              <TableSort>Placed</TableSort>
+            </TableColumnHeader>
+            <TableColumnHeader column="total" numeric>
+              <TableSort>Total</TableSort>
+            </TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((order) => (
+            <TableRow key={order.id} value={order.id}>
+              <TableRowHeader text="nowrap">{order.id}</TableRowHeader>
+              <TableCell>{order.customer}</TableCell>
+              <TableCell text="nowrap">{order.placed}</TableCell>
+              <TableCell numeric>{USD.format(order.total)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+<TableColumnHeader column="client">
+  <TableSort>Client</TableSort>
+  <TableColumnActions>
+    <TableTextFilter columnLabel="client" onValueChange={setClient} value={client} />
+  </TableColumnActions>
+</TableColumnHeader>;
+
+// The descriptor is yours to apply, and the query is where it belongs.
+const keep = createFilterPredicate(client);
+const rows = invoices.filter((row) => keep(row.client));
+```
+
+### 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
+
+```tsx
+import { useMemo, useState } from 'react';
+import { createFilterPredicate, type SetFilter } from '@slotted/core/filter';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnActions,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+  TableSetFilter,
+} from '@slotted/react/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,
+}));
+
+export default function TableFilter() {
+  const [status, setStatus] = useState<SetFilter | null>(null);
+  const rows = useMemo(() => {
+    const keep = createFilterPredicate(status);
+    return ORDERS.filter((order) => keep(order.status));
+  }, [status]);
+
+  return (
+    <Table columns={4}>
+      <TableContent aria-label="Open orders">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Order</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader>Warehouse</TableColumnHeader>
+            <TableColumnHeader>
+              Status
+              <TableColumnActions>
+                <TableSetFilter
+                  columnLabel="status"
+                  onValueChange={setStatus}
+                  options={STATUSES}
+                  value={status}
+                />
+              </TableColumnActions>
+            </TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((order) => (
+            <TableRow key={order.id} value={order.id}>
+              <TableRowHeader text="nowrap">{order.id}</TableRowHeader>
+              <TableCell>{order.customer}</TableCell>
+              <TableCell>{order.warehouse}</TableCell>
+              <TableCell>{order.status}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### Four columns, four kinds, one predicate
+
+Text, number, date and boolean, each with the operators its type has and each typed as itself — a text filter value is a TextFilter, in React types and in Angular signals alike, 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
+
+```tsx
+const [filters, setFilters] = useState<Record<string, FilterDescriptor | null>>({});
+const set = (column: string) => (value: FilterDescriptor | null) =>
+  setFilters((held) => ({ ...held, [column]: value }));
+
+const keep = useMemo(
+  () => createRowPredicate(filters, (row, column) => row[column as keyof Invoice]),
+  [filters],
+);
+const rows = useMemo(() => invoices.filter(keep), [invoices, keep]);
+
+<TableTextFilter columnLabel="client" onValueChange={set('client')} />;
+<TableNumberFilter columnLabel="amount" onValueChange={set('amount')} />;
+<TableDateFilter columnLabel="due" onValueChange={set('due')} />;
+<TableBooleanFilter columnLabel="paid" onValueChange={set('paid')} />;
+```
+
+### 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
+
+```tsx
+// between 100 and 2500, or nothing recorded at all
+const amount: NumberFilter = {
+  conditions: [{ end: 2500, operator: 'between', value: 100 }, { operator: 'empty' }],
+  join: 'or',
+  kind: 'number',
+};
+
+<TableNumberFilter columnLabel="amount" onValueChange={setAmount} value={amount} />;
+
+// One condition only, which is AG Grid maxNumConditions
+<TableTextFilter columnLabel="client" conditions={1} onValueChange={setClient} />;
+```
+
+### A time column, and a window that crosses midnight
+
+TableTimeFilter 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
+
+```tsx
+const [cutoff, setCutoff] = useState<TimeFilter | null>({
+  conditions: [{ end: '02:00', operator: 'between', value: '22:00' }],
+  join: 'and',
+  kind: 'time',
+});
+const keep = useMemo(() => createFilterPredicate(cutoff), [cutoff]);
+const rows = deliveries.filter((row) => keep(row.cutoff));
+
+<TableTimeFilter
+  columnLabel="cut-off"
+  granularity="minute"
+  onValueChange={setCutoff}
+  presets={<TimeRangePickerPreset value={MORNING_SHIFT}>Morning</TimeRangePickerPreset>}
+  value={cutoff}
+/>;
+```
+
+### A date-time column, at the precision you wrote
+
+TableDateTimeFilter 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
+
+```tsx
+const [scheduled, setScheduled] = useState<DateTimeFilter | null>(null);
+const keep = useMemo(
+  () => createFilterPredicate(scheduled, { timeZone: 'Europe/Lisbon' }),
+  [scheduled],
+);
+
+<TableDateTimeFilter
+  columnLabel="scheduled"
+  onValueChange={setScheduled}
+  presets={
+    <DateTimeRangePickerPreset value={EARLY_OCTOBER}>Early October</DateTimeRangePickerPreset>
+  }
+  value={scheduled}
+/>;
+```
+
+### 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 through the presets prop. 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
+
+```tsx
+<TableDateFilter
+  columnLabel="due"
+  onValueChange={setDue}
+  presets={
+    <>
+      <DateRangePickerPreset value={september}>September</DateRangePickerPreset>
+      <DateRangePickerPreset value={quarter}>Q4</DateRangePickerPreset>
+    </>
+  }
+  value={due}
+/>;
+```
+
+### A set typed as chips
+
+operand 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
+
+```tsx
+<TableSetFilter columnLabel="client" onValueChange={setClient} operand="tags" options={clients} />;
+<TableSetFilter columnLabel="invoice" onValueChange={setInvoice} operand="tags" />;
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+import { NumberField } from '@slotted/react/number-field';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@slotted/react/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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];
+
+export default function TableEditing() {
+  const [lines, setLines] = useState<readonly Line[]>(STOCK);
+  const update = (sku: string, change: Partial<Line>) =>
+    setLines((current) =>
+      current.map((line) => (line.sku === sku ? { ...line, ...change } : line)),
+    );
+
+  return (
+    <Table columns={4}>
+      <TableContent aria-label="Stock take, Reno">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>SKU</TableColumnHeader>
+            <TableColumnHeader>Product</TableColumnHeader>
+            <TableColumnHeader numeric>Counted</TableColumnHeader>
+            <TableColumnHeader>Bin</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {lines.map((line) => (
+            <TableRow key={line.sku} value={line.sku}>
+              <TableRowHeader text="nowrap">{line.sku}</TableRowHeader>
+              <TableCell>{line.product}</TableCell>
+              <TableCell numeric>
+                <NumberField
+                  aria-label={`Counted for ${line.sku}`}
+                  min={0}
+                  onValueChange={(value) => update(line.sku, { counted: value ?? 0 })}
+                  size="sm"
+                  stepper="none"
+                  value={line.counted}
+                  variant="plain"
+                />
+              </TableCell>
+              <TableCell>
+                <Select
+                  onValueChange={(value) => update(line.sku, { bin: value as string })}
+                  size="sm"
+                  value={line.bin}
+                  variant="plain"
+                >
+                  <SelectTrigger aria-label={`Bin of ${line.sku}`}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {BINS.map((bin) => (
+                      <SelectItem key={bin} value={bin}>
+                        {bin}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+import { useState } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+  TableSelect,
+  TableSelectAll,
+} from '@slotted/react/table';
+import { Text } from '@slotted/react/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 },
+];
+
+export default function TableSelection() {
+  const [chosen, setChosen] = useState<readonly string[]>(['INV-2041']);
+  const total = INVOICES.filter((invoice) => chosen.includes(invoice.id)).reduce(
+    (sum, invoice) => sum + invoice.amount,
+    0,
+  );
+
+  return (
+    <Table columns={5} onValueChange={setChosen} selectionMode="multiple" value={chosen}>
+      <TableContent aria-label="Invoices to send reminders for">
+        <TableHead>
+          <TableRow>
+            <TableSelectAll />
+            <TableColumnHeader>Invoice</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader>Status</TableColumnHeader>
+            <TableColumnHeader numeric>Amount</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {INVOICES.map((invoice) => (
+            <TableRow disabled={invoice.status === 'Draft'} key={invoice.id} value={invoice.id}>
+              <TableSelect />
+              <TableRowHeader text="nowrap">{invoice.id}</TableRowHeader>
+              <TableCell>{invoice.customer}</TableCell>
+              <TableCell>{invoice.status}</TableCell>
+              <TableCell numeric>{USD.format(invoice.amount)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+      <TableFooter>
+        <Text size="sm" tone="muted">
+          {chosen.length} selected · {USD.format(total)}
+        </Text>
+      </TableFooter>
+    </Table>
+  );
+}
+```
+
+### A record with more to say
+
+The expander is the Disclosure pattern: a button carrying aria-expanded and naming the row it opens. A closed detail is not in the DOM at all, so nothing is announced that a reader cannot reach.
+
+Example
+
+```tsx
+import { Fragment } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableDetail,
+  TableExpander,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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.',
+  },
+];
+
+export default function TableExpansion() {
+  return (
+    <Table columns={5} defaultExpanded={['RMA-0811']}>
+      <TableContent aria-label="Returns">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader />
+            <TableColumnHeader>Return</TableColumnHeader>
+            <TableColumnHeader>Order</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader numeric>Refund</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {RETURNS.map((item) => (
+            <Fragment key={item.id}>
+              <TableRow value={item.id}>
+                <TableCell>
+                  <TableExpander />
+                </TableCell>
+                <TableRowHeader text="nowrap">{item.id}</TableRowHeader>
+                <TableCell>{item.order}</TableCell>
+                <TableCell>{item.customer}</TableCell>
+                <TableCell numeric>{USD.format(item.refund)}</TableCell>
+              </TableRow>
+              <TableDetail value={item.id}>{item.detail}</TableDetail>
+            </Fragment>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+  TableSummary,
+} from '@slotted/react/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),
+}));
+
+const TOTAL = ORDERS.reduce((sum, order) => sum + order.total, 0);
+
+export default function TableSticky() {
+  return (
+    <Table columns={4} stickyFooter stickyHeader>
+      <TableContent
+        aria-label="September orders"
+        scrollProps={{ style: { maxBlockSize: '20rem' } }}
+      >
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Order</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader>Warehouse</TableColumnHeader>
+            <TableColumnHeader numeric>Total</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {ORDERS.map((order) => (
+            <TableRow key={order.id} value={order.id}>
+              <TableRowHeader text="nowrap">{order.id}</TableRowHeader>
+              <TableCell>{order.customer}</TableCell>
+              <TableCell>{order.warehouse}</TableCell>
+              <TableCell numeric>{USD.format(order.total)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableSummary>
+          <TableRow>
+            <TableCell colSpan={3}>{ORDERS.length} orders</TableCell>
+            <TableCell numeric>{USD.format(TOTAL)}</TableCell>
+          </TableRow>
+        </TableSummary>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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,
+  },
+];
+
+export default function TableScroll() {
+  return (
+    <Table columns={8}>
+      <TableContent aria-label="International shipments">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader sticky="start" text="nowrap">
+              Shipment
+            </TableColumnHeader>
+            <TableColumnHeader text="nowrap">Order</TableColumnHeader>
+            <TableColumnHeader text="nowrap">Customer</TableColumnHeader>
+            <TableColumnHeader text="nowrap">Origin</TableColumnHeader>
+            <TableColumnHeader text="nowrap">Destination</TableColumnHeader>
+            <TableColumnHeader text="nowrap">Carrier</TableColumnHeader>
+            <TableColumnHeader text="nowrap">Shipped</TableColumnHeader>
+            <TableColumnHeader numeric text="nowrap">
+              Cost
+            </TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {SHIPMENTS.map((shipment) => (
+            <TableRow key={shipment.id} value={shipment.id}>
+              <TableRowHeader sticky="start" text="nowrap">
+                {shipment.id}
+              </TableRowHeader>
+              <TableCell text="nowrap">{shipment.order}</TableCell>
+              <TableCell text="nowrap">{shipment.customer}</TableCell>
+              <TableCell text="nowrap">{shipment.origin}</TableCell>
+              <TableCell text="nowrap">{shipment.destination}</TableCell>
+              <TableCell text="nowrap">{shipment.carrier}</TableCell>
+              <TableCell text="nowrap">{shipment.shipped}</TableCell>
+              <TableCell numeric>{USD.format(shipment.cost)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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 },
+];
+
+export default function TableAlignment() {
+  return (
+    <Table columns={4}>
+      <TableContent aria-label="Invoices due">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader align="center">Region</TableColumnHeader>
+            <TableColumnHeader align="end">Due</TableColumnHeader>
+            <TableColumnHeader numeric>Amount</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {INVOICES.map((invoice) => (
+            <TableRow key={invoice.id} value={invoice.id}>
+              <TableRowHeader>{invoice.customer}</TableRowHeader>
+              <TableCell align="center">{invoice.region}</TableCell>
+              <TableCell align="end">{invoice.due}</TableCell>
+              <TableCell numeric>{USD.format(invoice.amount)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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',
+  },
+];
+
+export default function TableText() {
+  return (
+    <Table columns={3} layout="fixed">
+      <TableContent aria-label="Delivery notes">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Order</TableColumnHeader>
+            <TableColumnHeader>Note</TableColumnHeader>
+            <TableColumnHeader>Tracking</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {NOTES.map((row) => (
+            <TableRow key={row.id} value={row.id}>
+              <TableRowHeader text="nowrap">{row.id}</TableRowHeader>
+              <TableCell text="truncate">{row.note}</TableCell>
+              <TableCell text="wrap">{row.tracking}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+<Table>
+  <TableContent totalRowCount={128}>
+    <TableSummary>
+      <TableRow>
+        <TableCell numeric>11,061.25</TableCell>
+      </TableRow>
+    </TableSummary>
+  </TableContent>
+  <TableFooter>
+    <span>3 of 128 invoices</span>
+    <Pagination page={page} onPageChange={setPage} total={128} />
+  </TableFooter>
+</Table>;
+```
+
+### 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
+
+```tsx
+{
+  loading && rows.length === 0 ? (
+    <TableLoader skeletonRows={5} />
+  ) : rows.length === 0 ? (
+    <TableBody>
+      <TableRow>
+        <TableEmpty>
+          <ResultState status="no-results" title="No invoices match this filter" />
+        </TableEmpty>
+      </TableRow>
+    </TableBody>
+  ) : (
+    <TableBody>{rows}</TableBody>
+  );
+}
+```
+
+### 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
+
+```tsx
+<div data-slotted-density="dense">
+  <Table>{rows}</Table>
+</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
+
+```tsx
+import { Avatar } from '@slotted/react/avatar';
+import { Inline } from '@slotted/react/inline';
+import { Link } from '@slotted/react/link';
+import { StatusIndicator } from '@slotted/react/status-indicator';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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;
+
+export default function TableContentExample() {
+  return (
+    <Table columns={4}>
+      <TableContent aria-label="Key accounts">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Account</TableColumnHeader>
+            <TableColumnHeader>Account manager</TableColumnHeader>
+            <TableColumnHeader>ERP sync</TableColumnHeader>
+            <TableColumnHeader numeric>Balance</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {ACCOUNTS.map((account) => (
+            <TableRow key={account.id} value={account.id}>
+              <TableRowHeader text="nowrap">
+                <Link href={`#${account.id}`}>{account.name}</Link>
+              </TableRowHeader>
+              <TableCell text="nowrap">
+                <Inline align="center" gap={2}>
+                  <Avatar name={account.manager} size="sm" />
+                  {account.manager}
+                </Inline>
+              </TableCell>
+              <TableCell text="nowrap">
+                <StatusIndicator status={account.sync}>{account.syncLabel}</StatusIndicator>
+              </TableCell>
+              <TableCell numeric>{USD.format(account.balance)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### 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
+
+```tsx
+<Table columns={5} selectionMode="multiple" stickyHeader variant="framed">
+  <TableContent>{/* header, rows, actions column */}</TableContent>
+  <TableFooter>
+    <Pagination page={page} onPageChange={setPage} total={total} />
+  </TableFooter>
+</Table>;
+```
+
+### Setting the table once, and reaching past it
+
+The provider sets the frame and the layout for everything below it, SlottedProvider the language, and a table that states an axis itself still wins. Every part takes render, a ref and native props, so a part can become your own element without losing a data attribute.
+
+Excerpt — not a complete module
+
+```tsx
+<TableDefaultsProvider variant="framed" stickyHeader>
+  <App />
+</TableDefaultsProvider>;
+```
+
+### 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
+
+```tsx
+// 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
+
+```tsx
+<TableContent totalRowCount={412}>
+  <TableBody>
+    <TableRow rowIndex={41} value="INV-1042">
+      <TableRowHeader>INV-1042</TableRowHeader>
+    </TableRow>
+  </TableBody>
+</TableContent>;
+```
+
+### empty.tsx
+
+Example
+
+```tsx
+import {
+  ResultState,
+  ResultStateContent,
+  ResultStateDescription,
+  ResultStateTitle,
+} from '@slotted/react/result-state';
+import {
+  Table,
+  TableBody,
+  TableColumnHeader,
+  TableContent,
+  TableEmpty,
+  TableHead,
+  TableRow,
+} from '@slotted/react/table';
+
+export default function TableEmptyExample() {
+  return (
+    <Table columns={4}>
+      <TableContent aria-label="Returns this week">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Return</TableColumnHeader>
+            <TableColumnHeader>Order</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader numeric>Refund</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableEmpty>
+              <ResultState status="empty">
+                <ResultStateContent>
+                  <ResultStateTitle>No returns this week</ResultStateTitle>
+                  <ResultStateDescription>
+                    Returns appear here as soon as a customer opens one from their order page.
+                  </ResultStateDescription>
+                </ResultStateContent>
+              </ResultState>
+            </TableEmpty>
+          </TableRow>
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### loading.tsx
+
+Example
+
+```tsx
+import {
+  Table,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableLoader,
+  TableRow,
+} from '@slotted/react/table';
+
+export default function TableLoading() {
+  return (
+    <Table columns={4}>
+      <TableContent aria-label="Purchase orders">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Purchase order</TableColumnHeader>
+            <TableColumnHeader>Supplier</TableColumnHeader>
+            <TableColumnHeader>Expected</TableColumnHeader>
+            <TableColumnHeader numeric>Value</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableLoader skeletonRows={4} />
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### orders-list.tsx
+
+Example
+
+```tsx
+import { useMemo, useState } from 'react';
+import { createFilterPredicate, type SetFilter } from '@slotted/core/filter';
+import { Button } from '@slotted/react/button';
+import { Inline } from '@slotted/react/inline';
+import {
+  Pagination,
+  PaginationItems,
+  PaginationNext,
+  PaginationPrevious,
+} from '@slotted/react/pagination';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnActions,
+  TableColumnHeader,
+  TableContent,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+  TableSelect,
+  TableSelectAll,
+  TableSetFilter,
+  TableSort,
+  type TableSortDescriptor,
+} from '@slotted/react/table';
+import { Text } from '@slotted/react/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,
+  );
+}
+
+export default function TableOrdersList() {
+  const [sort, setSort] = useState<TableSortDescriptor | null>({
+    column: 'id',
+    direction: 'descending',
+  });
+  const [status, setStatus] = useState<SetFilter | null>(null);
+  const [chosen, setChosen] = useState<readonly string[]>([]);
+  const [page, setPage] = useState(1);
+
+  const matching = useMemo(() => {
+    const keep = createFilterPredicate(status);
+    return sortOrders(
+      ORDERS.filter((order) => keep(order.status)),
+      sort,
+    );
+  }, [sort, status]);
+  const first = (page - 1) * PAGE_SIZE;
+  const rows = matching.slice(first, first + PAGE_SIZE);
+
+  return (
+    <Table
+      columns={5}
+      onSortChange={setSort}
+      onValueChange={setChosen}
+      selectionMode="multiple"
+      sort={sort}
+      value={chosen}
+    >
+      <TableContent aria-label="Orders" totalRowCount={matching.length}>
+        <TableHead>
+          <TableRow>
+            <TableSelectAll />
+            <TableColumnHeader column="id">
+              <TableSort>Order</TableSort>
+            </TableColumnHeader>
+            <TableColumnHeader column="customer">
+              <TableSort>Customer</TableSort>
+            </TableColumnHeader>
+            <TableColumnHeader>
+              Status
+              <TableColumnActions>
+                <TableSetFilter
+                  columnLabel="status"
+                  onValueChange={(next) => {
+                    setStatus(next);
+                    setPage(1);
+                  }}
+                  options={STATUSES}
+                  value={status}
+                />
+              </TableColumnActions>
+            </TableColumnHeader>
+            <TableColumnHeader column="total" numeric>
+              <TableSort>Total</TableSort>
+            </TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((order, index) => (
+            <TableRow key={order.id} rowIndex={first + index + 1} value={order.id}>
+              <TableSelect />
+              <TableRowHeader text="nowrap">{order.id}</TableRowHeader>
+              <TableCell>{order.customer}</TableCell>
+              <TableCell>{order.status}</TableCell>
+              <TableCell numeric>{USD.format(order.total)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+      <TableFooter>
+        <Inline align="center" gap={3}>
+          <Text size="sm" tone="muted">
+            {chosen.length} selected
+          </Text>
+          <Button disabled={chosen.length === 0} size="sm" variant="outline">
+            Print packing slips
+          </Button>
+        </Inline>
+        <Pagination count={matching.length} onPageChange={setPage} page={page} pageSize={PAGE_SIZE}>
+          <PaginationPrevious />
+          <PaginationItems />
+          <PaginationNext />
+        </Pagination>
+      </TableFooter>
+    </Table>
+  );
+}
+```
+
+### pagination.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import {
+  Pagination,
+  PaginationItems,
+  PaginationNext,
+  PaginationPrevious,
+} from '@slotted/react/pagination';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/table';
+import { Text } from '@slotted/react/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;
+
+export default function TablePagination() {
+  const [page, setPage] = useState(1);
+  const first = (page - 1) * PAGE_SIZE;
+  const rows = INVOICES.slice(first, first + PAGE_SIZE);
+
+  return (
+    <Table columns={3}>
+      <TableContent aria-label="Invoices" totalRowCount={INVOICES.length}>
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader>Invoice</TableColumnHeader>
+            <TableColumnHeader>Customer</TableColumnHeader>
+            <TableColumnHeader numeric>Amount</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((invoice, index) => (
+            <TableRow key={invoice.id} rowIndex={first + index + 1} value={invoice.id}>
+              <TableRowHeader text="nowrap">{invoice.id}</TableRowHeader>
+              <TableCell>{invoice.customer}</TableCell>
+              <TableCell numeric>{USD.format(invoice.amount)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+      <TableFooter>
+        <Text size="sm" tone="muted">
+          {first + 1}–{first + rows.length} of {INVOICES.length}
+        </Text>
+        <Pagination count={INVOICES.length} onPageChange={setPage} page={page} pageSize={PAGE_SIZE}>
+          <PaginationPrevious />
+          <PaginationItems />
+          <PaginationNext />
+        </Pagination>
+      </TableFooter>
+    </Table>
+  );
+}
+```
+
+### refreshing.tsx
+
+Example
+
+```tsx
+import { useEffect, useState } from 'react';
+import { Button } from '@slotted/react/button';
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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 },
+];
+
+export default function TableRefreshing() {
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!loading) return;
+    const timer = setTimeout(() => setLoading(false), 1500);
+    return () => clearTimeout(timer);
+  }, [loading]);
+
+  return (
+    <Stack align="start" gap={3}>
+      <Button loading={loading} onClick={() => setLoading(true)} size="sm" variant="outline">
+        Refresh
+      </Button>
+      <Table columns={4} loading={loading}>
+        <TableContent aria-label="Purchase orders">
+          <TableHead>
+            <TableRow>
+              <TableColumnHeader>Purchase order</TableColumnHeader>
+              <TableColumnHeader>Supplier</TableColumnHeader>
+              <TableColumnHeader>Expected</TableColumnHeader>
+              <TableColumnHeader numeric>Value</TableColumnHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {PURCHASE_ORDERS.map((order) => (
+              <TableRow key={order.id} value={order.id}>
+                <TableRowHeader text="nowrap">{order.id}</TableRowHeader>
+                <TableCell>{order.supplier}</TableCell>
+                <TableCell>{order.expected}</TableCell>
+                <TableCell numeric>{USD.format(order.value)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </TableContent>
+      </Table>
+    </Stack>
+  );
+}
+```
+
+### single-selection.tsx
+
+Example
+
+```tsx
+import { useState } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+  TableSelect,
+} from '@slotted/react/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' },
+];
+
+export default function TableSingleSelection() {
+  const [rate, setRate] = useState<readonly string[]>(['ups-ground']);
+
+  return (
+    <Table columns={4} onValueChange={setRate} selectionMode="single" value={rate}>
+      <TableContent aria-label="Shipping rates for SO-10423">
+        <TableHead>
+          <TableRow>
+            <TableColumnHeader />
+            <TableColumnHeader>Carrier</TableColumnHeader>
+            <TableColumnHeader>Transit</TableColumnHeader>
+            <TableColumnHeader numeric>Price</TableColumnHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {RATES.map((option) => (
+            <TableRow key={option.id} value={option.id}>
+              <TableSelect />
+              <TableRowHeader>{option.carrier}</TableRowHeader>
+              <TableCell>{option.days}</TableCell>
+              <TableCell numeric>{option.price}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </TableContent>
+    </Table>
+  );
+}
+```
+
+### variants.tsx
+
+Example
+
+```tsx
+import { Stack } from '@slotted/react/stack';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableContent,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@slotted/react/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;
+
+export default function TableVariants() {
+  return (
+    <Stack gap={6}>
+      {VARIANTS.map(({ variant, caption }) => (
+        <Table columns={3} key={variant} variant={variant}>
+          <TableContent>
+            <TableCaption>{caption}</TableCaption>
+            <TableHead>
+              <TableRow>
+                <TableColumnHeader>Shipment</TableColumnHeader>
+                <TableColumnHeader>Carrier</TableColumnHeader>
+                <TableColumnHeader numeric>Cartons</TableColumnHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {SHIPMENTS.map((shipment) => (
+                <TableRow key={shipment.id} value={shipment.id}>
+                  <TableRowHeader>{shipment.id}</TableRowHeader>
+                  <TableCell>{shipment.carrier}</TableCell>
+                  <TableCell numeric>{shipment.cartons}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </TableContent>
+        </Table>
+      ))}
+    </Stack>
+  );
+}
+```