# Tables

Dense data display. Default to flat (no zebra striping) with hairline row borders. Reference: `kdctracker/admin.html` (`.card` data tables), `kdcdocs/public/styles.css` (`.kdc-table-head`, `.kdc-row`).

## Anatomy

See `anatomy.svg`. Header row · grouped header rows (optional) · data rows · footer summary (optional).

## Sizing

| Density | Row height | Cell padding |
|---------|------------|--------------|
| `compact` | 36px | `6px 12px` |
| `default` | 44px | `10px 16px` |
| `comfortable` | 56px | `14px 20px` |

Drive density with `[data-density="compact|default|comfortable"]` (per the kdcmapper convention).

## Styling

- Header: `text.muted` `caption` uppercase, 600 weight, `surface.subtle` background.
- Cell text: `bodyM`, `text.default`. Numerics use `tabular-nums` (`.tnum` utility).
- Row separator: 1px `border.subtle` bottom border. No vertical lines.
- Hover row: `surface.subtle`, `120ms` transition.
- Selected row: 2px `brand.primary` left border, `brand.primarySoft` background.
- Sticky header sits below any toolbar; sticky first column gets a 4px `elevation.2` shadow on right edge when scrolled.

## Cell types

- **Status pill** → `badge.*` variants.
- **Identifier / code** → `typography.mono` with subtle background `surface.subtle`.
- **Numeric** → right-aligned, `tabular-nums`.
- **Action cell** → trailing cell, ghost icon buttons; right-aligned, never wrap.

## Tokens used

`colors.surface.*`, `colors.border.*`, `typography.bodyM`/`caption`/`mono`, `components.badge.*`.

## Accessibility

- Use proper `<thead>` / `<tbody>` / `<th scope="col">` / `<th scope="row">`.
- Sortable columns: button inside `<th>` with `aria-sort="ascending|descending|none"`.
- Empty state: `role="status"`, single line in `text.muted`.
- Long tables: pagination or `aria-rowcount` for virtualised lists.

## Do / Don't

- ✅ Use `compact` density for ≥ 50 rows on screen at once.
- ✅ Right-align numerics and currencies; left-align text and identifiers.
- ❌ Don't zebra-stripe — it competes with hover and selection.
- ❌ Don't wrap action buttons; truncate text instead.