## When to use

Multi-actor history needing scan + filter + occasional drill-down. Audit logs are compliance evidence: every row is a who / when / what / where on a single resource class. The table-ui format scales to thousands of rows + cursor pagination; if the use case is single-actor narrative or fewer than ~20 events, prefer timeline-ui.

## Basic — admin actions on workspace

Standard layout: title + filters in the header, table in a bleed section, footer carrying status + pagination. Action column uses a tag-ui colored by verb severity (success/warning/danger). Resource column uses code-ui for monospace IDs.

Audit log Last 90 days · admin actions only All actors kim@example.com alex@example.com automation-bot All actions create update delete

## Composition rules

- table-ui driven by JS — never author `<tbody>`/`<tr>` in light DOM; the HTML parser foster-parents those out of custom elements. Set `[columns]` and `[data]` via the JS API (see audit-log.examples.js).
- Action verb gets a tag-ui — colored by severity: `create`/`update` = primary, `delete`/`revoke` = danger, `read`/`export` = muted. The color is the audit signal at a glance; never use uncolored text.
- Resource ID in native `<code>` — monospace makes scanning vertically aligned IDs trivial. `<code-ui>` is the BLOCK component (CODE label + Copy chrome); for a table cell use the native inline element. Never truncate trailing chars (they're how the user disambiguates similar IDs).
- Time column is relative + absolute — "2 hours ago" with the absolute timestamp in a tooltip. Use relative-time-ui for the surface; copy the ISO string to clipboard on row click for forensic work.
- IP / user-agent column is hidden by default — too wide for the scan layout. Surface in a row-detail drawer (drawer-ui) or per-row "Details" affordance, not as a primary column.
- Pagination is cursor-based — "Load older" appends rather than swaps pages. Audit logs grow append-only; the user is typically scrolling backward in time, not jumping to page 47.

## Cross-references

- table-ui · tag-ui · relative-time-ui — primitives composed here.
- timeline-ui — single-actor chronological event log alternative.
- export-flow — the "Export" affordance in the footer wires to this pattern.