@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/components/table.md

@@ -0,0 +1,967 @@
+# Table
+
+Displays tabular data in rows and columns.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Table.tsx)
+
+Figma: [Data/Table Card](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3500) (`Table.Root`), [Data/Table Cell](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3635) (`Table.Cell`), [Data/Table Empty](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3723) (`Table.Cell`), [Data/Table Footer](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3719) (`Table.Caption`), [Data/Table Header Cell](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3681) (`Table.HeaderCell`), [Data/Table Lead Tile](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3661) (`Table.LeadTile`), [Data/Table Row](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3589) (`Table.Row`), [Dense Table](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=3506-2536) (`Table.Root`), [Simple Table](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=3506-2513) (`Table.Root`)
+
+## Overview
+
+A table is a native `<table>` with styled parts. Use it for tabular data only, never for layout.
+
+## Examples
+
+### Basic
+
+```tsx
+import { style, Surface, Table } from '@tempoxyz/ds'
+
+export const fill = true
+function Transactions(props: Table.Root.Props) {
+  return (
+    <Surface>
+      <Table.Root {...props}>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Amount</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {(
+            [
+              ['0x4f2a…91c3', '$1,200.00', 'Confirmed', 'positive'],
+              ['0x91bd…07e1', '$48.50', 'Confirmed', 'positive'],
+              ['0xc3e0…5a22', '$310.00', 'Pending', 'warning'],
+              ['0x77a1…c0d9', '$9.99', 'Failed', 'negative'],
+            ] as const
+          ).map(([id, amount, status, tone]) => (
+            <Table.Row key={id}>
+              <Table.Cell mono>{id}</Table.Cell>
+              <Table.Cell numeric>{amount}</Table.Cell>
+              <Table.Cell status={tone}>{status}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Surface>
+  )
+}
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <Transactions />
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    backgroundColor: 'background.primary',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
+    padding: '16',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Basic.tsx)
+
+### Two Lines
+
+Set a second line in `Table.Subtitle`, lead the first cell with a `Table.LeadTile` or a [TokenLogo](token-logo.md), and set `muted` on a value that matters less, such as a zero amount.
+
+```tsx
+import { Inline, StatusChip, style, Surface, Table } from '@tempoxyz/ds'
+import { ArrowDownLeft, ArrowUpRight, CreditCard } from '@tempoxyz/ds/icons'
+
+export const fill = true
+const activity = [
+  {
+    amount: '+$48.50',
+    detail: '48.50 USDC',
+    icon: <ArrowDownLeft />,
+    status: ['Settled', 'positive'],
+    time: 'Today, 09:41',
+    title: 'Received from Bob',
+  },
+  {
+    amount: '$120.00',
+    detail: '120.00 USDC',
+    icon: <ArrowUpRight />,
+    status: ['Pending', 'warning'],
+    time: 'Today, 08:12',
+    title: 'Sent to Ada',
+  },
+  {
+    amount: '$0.00',
+    detail: 'Declined',
+    icon: <CreditCard />,
+    status: ['Failed', 'negative'],
+    time: 'Yesterday, 18:30',
+    title: 'Card payment',
+  },
+] as const
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <Surface>
+        <Table.Root size="large">
+          <Table.Body>
+            {activity.map((entry) => (
+              <Table.Row key={entry.title}>
+                <Table.Cell>
+                  <Inline gap="12">
+                    <Table.LeadTile>{entry.icon}</Table.LeadTile>
+                    <div>
+                      {entry.title}
+                      <Table.Subtitle>{entry.time}</Table.Subtitle>
+                    </div>
+                  </Inline>
+                </Table.Cell>
+                <Table.Cell>
+                  <StatusChip intent={entry.status[1]} size="small">
+                    {entry.status[0]}
+                  </StatusChip>
+                </Table.Cell>
+                <Table.Cell
+                  muted={entry.amount === '$0.00'}
+                  status={entry.amount.startsWith('+') ? 'positive' : undefined}
+                >
+                  {entry.amount}
+                  <Table.Subtitle>{entry.detail}</Table.Subtitle>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Surface>
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    backgroundColor: 'background.primary',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
+    padding: '16',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/TwoLines.tsx)
+
+### Sortable Columns
+
+Put a `Table.SortButton` in a `Table.HeaderCell` and set `aria-sort` on the header cell. The chevron shows on hover and once the column is sorted.
+
+```tsx
+import { style, Surface, Table } from '@tempoxyz/ds'
+import { useState } from 'react'
+
+export const fill = true
+const assets = [
+  ['USDC', 3420.18],
+  ['USDT0', 3150],
+  ['pathUSD', 2424.24],
+] as const
+
+const format = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' })
+
+type Sort = { column: 'asset' | 'balance'; order: 'ascending' | 'descending' }
+
+export function Demo() {
+  const [sort, setSort] = useState<Sort>({ column: 'balance', order: 'descending' })
+
+  const rows = [...assets].sort((a, b) => {
+    const order = sort.order === 'ascending' ? 1 : -1
+    if (sort.column === 'asset') return a[0].localeCompare(b[0]) * order
+    return (a[1] - b[1]) * order
+  })
+  const toggle = (column: Sort['column']) =>
+    setSort({
+      column,
+      order: sort.column === column && sort.order === 'descending' ? 'ascending' : 'descending',
+    })
+
+  return (
+    <div {...styles.grid()}>
+      <Surface>
+        <Table.Root interactive>
+          <Table.Head>
+            <Table.Row>
+              <Table.HeaderCell aria-sort={sort.column === 'asset' ? sort.order : 'none'}>
+                <Table.SortButton onClick={() => toggle('asset')}>Asset</Table.SortButton>
+              </Table.HeaderCell>
+              <Table.HeaderCell aria-sort={sort.column === 'balance' ? sort.order : 'none'}>
+                <Table.SortButton onClick={() => toggle('balance')}>Balance</Table.SortButton>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {rows.map(([symbol, balance]) => (
+              <Table.Row key={symbol}>
+                <Table.Cell>{symbol}</Table.Cell>
+                <Table.Cell>{format.format(balance)}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Surface>
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    backgroundColor: 'background.primary',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
+    padding: '16',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Sortable.tsx)
+
+### Interactive
+
+Set `interactive` to fill a hovered row and outline a focus-visible one.
+
+```tsx
+import { style, Surface, Table } from '@tempoxyz/ds'
+
+export const fill = true
+function Transactions(props: Table.Root.Props) {
+  return (
+    <Surface>
+      <Table.Root {...props}>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Amount</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {(
+            [
+              ['0x4f2a…91c3', '$1,200.00', 'Confirmed', 'positive'],
+              ['0x91bd…07e1', '$48.50', 'Confirmed', 'positive'],
+              ['0xc3e0…5a22', '$310.00', 'Pending', 'warning'],
+              ['0x77a1…c0d9', '$9.99', 'Failed', 'negative'],
+            ] as const
+          ).map(([id, amount, status, tone]) => (
+            <Table.Row key={id} tabIndex={0}>
+              <Table.Cell mono>{id}</Table.Cell>
+              <Table.Cell numeric>{amount}</Table.Cell>
+              <Table.Cell status={tone}>{status}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Surface>
+  )
+}
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <Transactions interactive />
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    backgroundColor: 'background.primary',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
+    padding: '16',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Interactive.tsx)
+
+### Dividers
+
+Rows draw a divider inset by their padding, except the last row. Set `dividers={false}` to remove them.
+
+```tsx
+import { style, Surface, Table } from '@tempoxyz/ds'
+
+export const fill = true
+function Transactions(props: Table.Root.Props) {
+  return (
+    <Surface>
+      <Table.Root {...props}>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Amount</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {(
+            [
+              ['0x4f2a…91c3', '$1,200.00', 'Confirmed', 'positive'],
+              ['0x91bd…07e1', '$48.50', 'Confirmed', 'positive'],
+              ['0xc3e0…5a22', '$310.00', 'Pending', 'warning'],
+              ['0x77a1…c0d9', '$9.99', 'Failed', 'negative'],
+            ] as const
+          ).map(([id, amount, status, tone]) => (
+            <Table.Row key={id}>
+              <Table.Cell mono>{id}</Table.Cell>
+              <Table.Cell numeric>{amount}</Table.Cell>
+              <Table.Cell status={tone}>{status}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Surface>
+  )
+}
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <Transactions dividers={false} />
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    backgroundColor: 'background.primary',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
+    padding: '16',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Dividers.tsx)
+
+### Size
+
+Set `size` to `small`, `medium` (default), or `large`.
+
+```tsx
+import { style, Surface, Table } from '@tempoxyz/ds'
+
+export const fill = true
+function Transactions(props: Table.Root.Props) {
+  return (
+    <Surface>
+      <Table.Root {...props}>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>ID</Table.HeaderCell>
+            <Table.HeaderCell>Amount</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {(
+            [
+              ['0x4f2a…91c3', '$1,200.00', 'Confirmed', 'positive'],
+              ['0x91bd…07e1', '$48.50', 'Confirmed', 'positive'],
+              ['0xc3e0…5a22', '$310.00', 'Pending', 'warning'],
+              ['0x77a1…c0d9', '$9.99', 'Failed', 'negative'],
+            ] as const
+          ).map(([id, amount, status, tone]) => (
+            <Table.Row key={id}>
+              <Table.Cell mono>{id}</Table.Cell>
+              <Table.Cell numeric>{amount}</Table.Cell>
+              <Table.Cell status={tone}>{status}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Surface>
+  )
+}
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <Transactions interactive size="small" />
+      <Transactions size="large" />
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    backgroundColor: 'background.primary',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(24rem, 1fr)) !custom',
+    padding: '16',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Size.tsx)
+
+### Dense
+
+Set `variant="dense"` for a row of labels over rows of details, such as a comparison of plans. Columns share the width equally.
+
+```tsx
+import { Table } from '@tempoxyz/ds'
+
+export const fill = true
+const plans = [
+  ['Starter', '0.10%', 'T+1', 'Email', 'USDC'],
+  ['Growth', '0.08%', 'Same day', 'Chat', 'USDC, USDT0'],
+  ['Scale', 'Custom', 'Instant', 'Dedicated', 'Any stablecoin'],
+] as const
+
+export function Demo() {
+  return (
+    <Table variant="dense">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Plan</Table.HeaderCell>
+          <Table.HeaderCell>Fee</Table.HeaderCell>
+          <Table.HeaderCell>Settlement</Table.HeaderCell>
+          <Table.HeaderCell>Support</Table.HeaderCell>
+          <Table.HeaderCell>Assets</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {plans.map((plan) => (
+          <Table.Row key={plan[0]}>
+            {plan.map((value) => (
+              <Table.Cell key={value}>{value}</Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Dense.tsx)
+
+### Simple
+
+Set `variant="simple"` for rows that each lead with a row header beside a paragraph. Set `scope="row"` on each `Table.HeaderCell`.
+
+```tsx
+import { Table } from '@tempoxyz/ds'
+
+export const fill = true
+const uses = [
+  [
+    'Global payouts and payroll',
+    'Platforms can pay merchants, contractors, or employees in stablecoins or local currency.',
+  ],
+  [
+    'Treasury management',
+    'Companies can hold balances in stablecoins and move them between entities in seconds.',
+  ],
+  [
+    'Cross-border settlement',
+    'Banks can settle with partners abroad without waiting on correspondent accounts.',
+  ],
+] as const
+
+export function Demo() {
+  return (
+    <Table variant="simple">
+      <Table.Caption>Use cases</Table.Caption>
+      <Table.Body>
+        {uses.map(([title, description]) => (
+          <Table.Row key={title}>
+            <Table.HeaderCell scope="row">{title}</Table.HeaderCell>
+            <Table.Cell>{description}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Table/Simple.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { Table } from '@tempoxyz/ds'
+
+<Table>
+  <Table.Caption />
+  <Table.Head>
+    <Table.Row>
+      <Table.HeaderCell>
+        <Table.SortButton />
+      </Table.HeaderCell>
+    </Table.Row>
+  </Table.Head>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Table.LeadTile />
+        <Table.Subtitle />
+      </Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+<Table.Root />
+```
+
+## Guidelines
+
+### When to Use
+
+* Compare many records with the same fields, such as wallet activity (date, recipient, amount, status) or benchmark runs (commit, TPS, latency).
+* Let people scan a column or find one row among many.
+* List API keys, webhooks, or team members.
+
+### When Not to Use
+
+* Use [ListGroup](list-group.md) with `ListGroup.Label` for the fields of one record, such as a transaction's network, fee, and status.
+* Use [ListGroup](list-group.md) with `action="navigation"` for a short list of pages or settings to open.
+* Use [Grid](grid.md) or [Stack](stack.md) to arrange content.
+* Use a [Surface](surface.md) with a large [Amount](amount.md) for one headline number, such as a balance or the current TPS.
+
+### Align Numbers to the End
+
+* **Figures:** Set `numeric` on number cells for tabular figures.
+* **Alignment:** Set `justify="end"` on those cells and on their `Table.HeaderCell`. The last column already aligns to the end, unless its cells set `justify="start"`.
+* **Decimals:** Keep one decimal count per column, such as `41.2` and `102.5`.
+
+**Do:** Set `numeric` and `justify="end"` on number columns and their headers.
+
+```tsx
+/**
+ * Do example for "Align Numbers to the End" on the Table page.
+ * Set `numeric` and `justify="end"` on number columns and their headers.
+ * @module
+ */
+import { Table } from '@tempoxyz/ds'
+
+const runs = [
+  ['4f2a91c', '12,480', '41.2'],
+  ['91bd07e', '9,315', '38.7'],
+  ['c3e05a2', '10,072', '102.5'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Commit</Table.HeaderCell>
+          <Table.HeaderCell justify="end">TPS</Table.HeaderCell>
+          <Table.HeaderCell>p99 (ms)</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {runs.map(([commit, tps, latency]) => (
+          <Table.Row key={commit}>
+            <Table.Cell mono>{commit}</Table.Cell>
+            <Table.Cell justify="end" numeric>
+              {tps}
+            </Table.Cell>
+            <Table.Cell numeric>{latency}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+**Don't:** Start-align numbers or leave them in proportional figures.
+
+```tsx
+/**
+ * Don't example for "Align Numbers to the End" on the Table page.
+ * Don't start-align numbers or leave them in proportional figures.
+ * @module
+ */
+import { Table } from '@tempoxyz/ds'
+
+const runs = [
+  ['4f2a91c', '12,480', '41.2'],
+  ['91bd07e', '9,315', '38.7'],
+  ['c3e05a2', '10,072', '102.5'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Commit</Table.HeaderCell>
+          <Table.HeaderCell>TPS</Table.HeaderCell>
+          <Table.HeaderCell>p99 (ms)</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {runs.map(([commit, tps, latency]) => (
+          <Table.Row key={commit}>
+            <Table.Cell>{commit}</Table.Cell>
+            <Table.Cell>{tps}</Table.Cell>
+            <Table.Cell>{latency}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+An [Amount](amount.md) in a cell renders as a block and sets its own alignment. Give it `align="right"` in an end-aligned column.
+
+### Truncate Hashes in the Middle
+
+Set `mono` on cells with hashes, addresses, and commit IDs, and shorten them with `formatHex`. Link the row to a details view that shows the full value in a [Hex](hex.md) with `copy`.
+
+**Do:** Keep the `0x` prefix and four characters on each side, such as `0x4f2a…91c3`.
+
+```tsx
+/**
+ * Do example for "Truncate Hashes in the Middle" on the Table page.
+ * Keep the `0x` prefix and four characters on each side, such as `0x4f2a…91c3`.
+ * @module
+ */
+import { formatHex, Table } from '@tempoxyz/ds'
+
+const transfers = [
+  ['0x4f2a8c1e9b7d3a6f5e2c0b8d7a1f4e6c9b3d2a5f8e7c6b1d0a9f3e2c4b5091c3', '25.00'],
+  ['0x91bd07e3a5c8f2d6b4e1a9c7f3d5b2e8a6c4f1d9b7e3a5c2f8d6b4e1a9c70e17', '120.00'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Transaction</Table.HeaderCell>
+          <Table.HeaderCell>Amount</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {transfers.map(([hash, amount]) => (
+          <Table.Row key={hash}>
+            <Table.Cell mono>{formatHex(hash)}</Table.Cell>
+            <Table.Cell numeric>{amount}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+**Don't:** Show full hashes, which crowd out the other columns.
+
+```tsx
+/**
+ * Don't example for "Truncate Hashes in the Middle" on the Table page.
+ * Don't show full hashes, which crowd out the other columns.
+ * @module
+ */
+import { Table } from '@tempoxyz/ds'
+
+const transfers = [
+  ['0x4f2a8c1e9b7d3a6f5e2c0b8d7a1f4e6c9b3d2a5f8e7c6b1d0a9f3e2c4b5091c3', '25.00'],
+  ['0x91bd07e3a5c8f2d6b4e1a9c7f3d5b2e8a6c4f1d9b7e3a5c2f8d6b4e1a9c70e17', '120.00'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Transaction</Table.HeaderCell>
+          <Table.HeaderCell>Amount</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {transfers.map(([hash, amount]) => (
+          <Table.Row key={hash}>
+            <Table.Cell mono>{hash}</Table.Cell>
+            <Table.Cell numeric>{amount}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+### Pair Status Color With Words
+
+`status` colors a cell's text `positive`, `negative`, or `warning`. If the status needs more weight, use a [Badge](badge.md) in the cell.
+
+**Do:** Keep a word with each color, such as Failed.
+
+```tsx
+/**
+ * Do example for "Pair Status Color With Words" on the Table page.
+ * Keep a word with each color, such as Failed.
+ * @module
+ */
+import { Table } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Recipient</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Alice</Table.Cell>
+          <Table.Cell status="positive">Confirmed</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Bob</Table.Cell>
+          <Table.Cell status="warning">Pending</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Carol</Table.Cell>
+          <Table.Cell status="negative">Failed</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+**Don't:** Show status by color alone.
+
+```tsx
+/** Don't example for "Pair Status Color With Words" on the Table page. Don't show status by color alone. @module */
+import { Table } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Recipient</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Alice</Table.Cell>
+          <Table.Cell status="positive">●</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Bob</Table.Cell>
+          <Table.Cell status="warning">●</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Carol</Table.Cell>
+          <Table.Cell status="negative">●</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+### Make Clickable Rows Reachable by Keyboard
+
+`interactive` adds styles only, with no click or key handling. If the whole row also responds to a click, keep other buttons out of it.
+
+**Do:** Put a link to the record in the first cell.
+
+```tsx
+/**
+ * Do example for "Make Clickable Rows Reachable by Keyboard" on the Table page.
+ * Put a link to the record in the first cell.
+ * @module
+ */
+import { style, Table } from '@tempoxyz/ds'
+
+const transfers = [
+  ['0x4f2a…91c3', '25.00'],
+  ['0x91bd…07e1', '120.00'],
+  ['0xc3e0…5a22', '8.50'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table interactive size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Transaction</Table.HeaderCell>
+          <Table.HeaderCell>Amount</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {transfers.map(([hash, amount]) => (
+          <Table.Row key={hash}>
+            <Table.Cell mono>
+              <a href="#" {...styles.link()}>
+                {hash}
+              </a>
+            </Table.Cell>
+            <Table.Cell numeric>{amount}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+namespace styles {
+  export const link = style({
+    color: 'content.primary',
+    textDecorationLine: 'underline !custom',
+    textUnderlineOffset: '4px !custom',
+  })
+}
+```
+
+**Don't:** Rely on a row click handler that the keyboard can't reach.
+
+```tsx
+/**
+ * Don't example for "Make Clickable Rows Reachable by Keyboard" on the Table page.
+ * Don't rely on a row click handler that the keyboard can't reach.
+ * @module
+ */
+import { Table } from '@tempoxyz/ds'
+
+const transfers = [
+  ['0x4f2a…91c3', '25.00'],
+  ['0x91bd…07e1', '120.00'],
+  ['0xc3e0…5a22', '8.50'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table interactive size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Transaction</Table.HeaderCell>
+          <Table.HeaderCell>Amount</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {transfers.map(([hash, amount]) => (
+          <Table.Row key={hash} onClick={() => {}}>
+            <Table.Cell mono>{hash}</Table.Cell>
+            <Table.Cell numeric>{amount}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+### Keep Long Tables Readable
+
+* **Sticky headers:** Set `sticky` on `Table.Head`, and place the table in a scrolling container with a fixed height.
+* **Long histories:** Split them with [Pagination](pagination.md).
+
+### Match Density to the Data
+
+* **Small (32px):** Dense dashboards, such as benchmark results.
+* **Medium (40px):** The default.
+* **Large (56px):** Avatars or token icons beside two lines of text.
+
+## Content
+
+* Write column headers as short nouns, such as Recipient, Amount, and Block time.
+* Put the unit of a metric in the header, such as `p99 (ms)`. Keep the currency or token on each amount, since one table can mix assets.
+* Use one date format per column. Use relative times, such as 5 min ago, only for recent activity, and show the full date in the details view.
+* Fill empty cells with one value, such as None or 0, so a blank cell doesn't read as a loading error.
+
+## Accessibility
+
+A table renders native table elements, so screen readers announce rows, columns, and headers. It follows the [WAI-ARIA table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/).
+
+### Semantics
+
+* **Table.Root (table):** Uses native table elements for every part, from the root to each cell.
+* **Table.HeaderCell (th):** Column headers. If a body row's first cell names the record, such as a commit ID, make it a row header.
+* **Appearance Props (numeric, mono, muted, status):** These and `interactive` change styles only. Status colors aren't announced.
+* **Table.SortButton (button):** A native button in the header cell. The header cell announces its `aria-sort` order.
+
+### Keyboard
+
+A table has no keys of its own. Screen reader users move through cells with table commands.
+
+For a sort button, and for a row you make focusable with `tabIndex={0}` in an `interactive` table:
+
+* **Sort the Column (Enter or Space):** Runs the `onClick` of the focused sort button.
+* **Move Focus to the Row (Tab):** Moves focus to the row.
+
+### Focus
+
+With `interactive`, a focused body row shows an outline inside its edges. A focused sort button shows an outline around the label of its header cell. The table adds no other tab stops.
+
+### Your Responsibilities
+
+* **Name Every Table (Table.Caption):** Caption it, or use `aria-labelledby` for a visible heading. The caption renders below the rows.
+* **Update the Sort Order (aria-sort):** Sort the rows in `onClick`, and set `aria-sort` on the sorted header cell and `none` on the rest.
+* **Mark Headers (scope):** Mark every column header, and the cell that identifies each row.
+* **Reflow Wide Tables (SC 1.4.10):** Put a wide table in a focusable [scrolling container](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) with an `aria-label`.
+
+## Related
+
+[ListGroup](list-group.md)
+
+Use for the details of one record.
+
+[Amount](amount.md)
+
+Use for money and token amounts in cells.
+
+[Hex](hex.md)
+
+Use for addresses and hashes.
+
+[Badge](badge.md)
+
+Use for statuses.
+
+[Pagination](pagination.md)
+
+Use for long histories.
+
+[Tables and Lists](../patterns/tables-and-lists.md)
+
+Covers choosing a layout.
+
+[Dashboards](../patterns/dashboards.md)
+
+Covers benchmark and metric views.