library

data table

Records, filter, and diff-cell table modes (absorbs records/filter/diff tables).

au-data-table

Installation

tokens.css + data-table.css + button.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/data-table/data-table.css">

Records

Name	Status
Acme	open

1 record

Code

data-table.html + data-table.css

data-table

<style>
/* agent-ui / data-table — records | filter | diff modes */

/* agent-ui / records-table — first-class component (promoted from host extracts). */
/* 11 Records table */
.au-records {
  background: var(--au-surface-muted);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--au-border-color) 50%, transparent);
  overflow: auto;
}
.au-records table { border-collapse: collapse; min-width: 40rem; width: 100%; }
.au-records th,
.au-records td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
  white-space: nowrap;
}
.au-records tbody {
  background: var(--au-surface);
}
.au-records th { color: var(--au-fg-muted); font-weight: 500; }
.au-records th button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
@media (max-width: 640px) {
  .au-records th button {
    min-height: 40px;
    min-width: 40px;
  }
}
@media (pointer: coarse) {
  .au-records th button {
    min-height: 44px;
    min-width: 44px;
  }
}
.au-records th button:focus-visible {
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
.au-records__tag {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  color: var(--au-fg-muted);
  display: inline-block;
  font: 400 11px/1.2 var(--au-font-sans);
  margin: 0 4px 4px 0;
  padding: 4px 8px;
}
.au-records__foot {
  color: var(--au-fg-subtle);
  font: 400 12px/1.3 var(--au-font-sans);
  padding: 12px;
}


/* agent-ui / filter-table — first-class component (promoted from host extracts). */
/* 12 Filter table */
.au-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.au-filter-bar .au-btn[aria-pressed="true"] {
  background: var(--au-surface-muted);
  color: var(--au-fg);
}
.au-filter-table {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: auto;
}
.au-filter-table table { border-collapse: collapse; width: 100%; }
.au-filter-table th,
.au-filter-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
.au-filter-table th { color: var(--au-fg-muted); font-weight: 500; }
.au-filter-table tr[hidden] { display: none; }


/* agent-ui / diff-table — first-class component (promoted from host extracts). */
/* 10 Diff table */
.au-diff-table {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: auto;
}
.au-diff-table__title {
  border-bottom: 1px solid var(--au-border-color);
  font: 600 14px/1.3 var(--au-font-sans);
  margin: 0;
  padding: 12px 16px;
}
.au-diff-table table { border-collapse: collapse; min-width: 100%; }
.au-diff-table th,
.au-diff-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}
.au-diff-table th { color: var(--au-fg-muted); font-weight: 500; }
.au-diff-table tr[data-au-change="add"] td {
  background: color-mix(in srgb, var(--au-success) 10%, transparent);
}
.au-diff-table tr[data-au-change="del"] td {
  background: color-mix(in srgb, var(--au-danger) 10%, transparent);
  text-decoration: line-through;
}
.au-diff-table tr[data-au-change="edit"] td {
  background: color-mix(in srgb, var(--au-action) 8%, transparent);
}




/* Alias root */

.au-data-table { min-width: 0; }
</style>

<div class="au-records au-data-table" data-au-component="data-table" data-au-mode="records" aria-label="Records"><table><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Acme</td><td><span class="au-records__tag">open</span></td></tr></tbody></table><p class="au-records__foot">1 record</p></div>

Filter

Item	Status
Refund	open

Code

data-table.html + data-table.css

data-table

<style>
/* agent-ui / data-table — records | filter | diff modes */

/* agent-ui / records-table — first-class component (promoted from host extracts). */
/* 11 Records table */
.au-records {
  background: var(--au-surface-muted);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--au-border-color) 50%, transparent);
  overflow: auto;
}
.au-records table { border-collapse: collapse; min-width: 40rem; width: 100%; }
.au-records th,
.au-records td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
  white-space: nowrap;
}
.au-records tbody {
  background: var(--au-surface);
}
.au-records th { color: var(--au-fg-muted); font-weight: 500; }
.au-records th button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
@media (max-width: 640px) {
  .au-records th button {
    min-height: 40px;
    min-width: 40px;
  }
}
@media (pointer: coarse) {
  .au-records th button {
    min-height: 44px;
    min-width: 44px;
  }
}
.au-records th button:focus-visible {
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
.au-records__tag {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  color: var(--au-fg-muted);
  display: inline-block;
  font: 400 11px/1.2 var(--au-font-sans);
  margin: 0 4px 4px 0;
  padding: 4px 8px;
}
.au-records__foot {
  color: var(--au-fg-subtle);
  font: 400 12px/1.3 var(--au-font-sans);
  padding: 12px;
}


/* agent-ui / filter-table — first-class component (promoted from host extracts). */
/* 12 Filter table */
.au-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.au-filter-bar .au-btn[aria-pressed="true"] {
  background: var(--au-surface-muted);
  color: var(--au-fg);
}
.au-filter-table {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: auto;
}
.au-filter-table table { border-collapse: collapse; width: 100%; }
.au-filter-table th,
.au-filter-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
.au-filter-table th { color: var(--au-fg-muted); font-weight: 500; }
.au-filter-table tr[hidden] { display: none; }


/* agent-ui / diff-table — first-class component (promoted from host extracts). */
/* 10 Diff table */
.au-diff-table {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: auto;
}
.au-diff-table__title {
  border-bottom: 1px solid var(--au-border-color);
  font: 600 14px/1.3 var(--au-font-sans);
  margin: 0;
  padding: 12px 16px;
}
.au-diff-table table { border-collapse: collapse; min-width: 100%; }
.au-diff-table th,
.au-diff-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}
.au-diff-table th { color: var(--au-fg-muted); font-weight: 500; }
.au-diff-table tr[data-au-change="add"] td {
  background: color-mix(in srgb, var(--au-success) 10%, transparent);
}
.au-diff-table tr[data-au-change="del"] td {
  background: color-mix(in srgb, var(--au-danger) 10%, transparent);
  text-decoration: line-through;
}
.au-diff-table tr[data-au-change="edit"] td {
  background: color-mix(in srgb, var(--au-action) 8%, transparent);
}




/* Alias root */

.au-data-table { min-width: 0; }
</style>

<div class="au-filter-bar" role="group" aria-label="Filter"><button type="button" class="au-btn au-btn--ghost au-btn--sm" aria-pressed="true">All</button><button type="button" class="au-btn au-btn--ghost au-btn--sm" aria-pressed="false">Open</button></div><div class="au-filter-table" data-au-component="data-table" data-au-mode="filter"><table><thead><tr><th>Item</th><th>Status</th></tr></thead><tbody><tr data-au-status="open"><td>Refund</td><td>open</td></tr></tbody></table></div>

Diff cells

Proposed edits

Field	Value
note	added
legacy	removed

Code

data-table.html + data-table.css

data-table

<style>
/* agent-ui / data-table — records | filter | diff modes */

/* agent-ui / records-table — first-class component (promoted from host extracts). */
/* 11 Records table */
.au-records {
  background: var(--au-surface-muted);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--au-border-color) 50%, transparent);
  overflow: auto;
}
.au-records table { border-collapse: collapse; min-width: 40rem; width: 100%; }
.au-records th,
.au-records td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
  white-space: nowrap;
}
.au-records tbody {
  background: var(--au-surface);
}
.au-records th { color: var(--au-fg-muted); font-weight: 500; }
.au-records th button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
@media (max-width: 640px) {
  .au-records th button {
    min-height: 40px;
    min-width: 40px;
  }
}
@media (pointer: coarse) {
  .au-records th button {
    min-height: 44px;
    min-width: 44px;
  }
}
.au-records th button:focus-visible {
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}
.au-records__tag {
  background: var(--au-surface-muted);
  border-radius: var(--au-radius-pill);
  color: var(--au-fg-muted);
  display: inline-block;
  font: 400 11px/1.2 var(--au-font-sans);
  margin: 0 4px 4px 0;
  padding: 4px 8px;
}
.au-records__foot {
  color: var(--au-fg-subtle);
  font: 400 12px/1.3 var(--au-font-sans);
  padding: 12px;
}


/* agent-ui / filter-table — first-class component (promoted from host extracts). */
/* 12 Filter table */
.au-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.au-filter-bar .au-btn[aria-pressed="true"] {
  background: var(--au-surface-muted);
  color: var(--au-fg);
}
.au-filter-table {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: auto;
}
.au-filter-table table { border-collapse: collapse; width: 100%; }
.au-filter-table th,
.au-filter-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
}
.au-filter-table th { color: var(--au-fg-muted); font-weight: 500; }
.au-filter-table tr[hidden] { display: none; }


/* agent-ui / diff-table — first-class component (promoted from host extracts). */
/* 10 Diff table */
.au-diff-table {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: auto;
}
.au-diff-table__title {
  border-bottom: 1px solid var(--au-border-color);
  font: 600 14px/1.3 var(--au-font-sans);
  margin: 0;
  padding: 12px 16px;
}
.au-diff-table table { border-collapse: collapse; min-width: 100%; }
.au-diff-table th,
.au-diff-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  font: 400 13px/1.35 var(--au-font-sans);
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}
.au-diff-table th { color: var(--au-fg-muted); font-weight: 500; }
.au-diff-table tr[data-au-change="add"] td {
  background: color-mix(in srgb, var(--au-success) 10%, transparent);
}
.au-diff-table tr[data-au-change="del"] td {
  background: color-mix(in srgb, var(--au-danger) 10%, transparent);
  text-decoration: line-through;
}
.au-diff-table tr[data-au-change="edit"] td {
  background: color-mix(in srgb, var(--au-action) 8%, transparent);
}




/* Alias root */

.au-data-table { min-width: 0; }
</style>

<div class="au-diff-table" data-au-component="data-table" data-au-mode="diff"><h3 class="au-diff-table__title">Proposed edits</h3><table><thead><tr><th>Field</th><th>Value</th></tr></thead><tbody><tr data-au-change="add"><td>note</td><td>added</td></tr><tr data-au-change="del"><td>legacy</td><td>removed</td></tr></tbody></table></div>

Component contract

Install: tokens.css · data-table.css · button.css
States: Host-owned via data-au-state and documented variants
Host: content, state transitions, and execution behind actions

For agents

data-table.contract

# agent-ui / data-table
component: data-table
selector: .au-data-table
data_au_component: data-table
purpose: Records, filter, and diff-cell table modes (absorbs records/filter/diff tables).

install:
  - tokens.css
  - data-table.css
  - button.css when rendering filter chips

states: Host-owned via data-au-state and documented variants.
css_variables: Uses shared semantic tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Markup and native controls remain usable without script.
host_owns: The host owns content, state transitions, and execution behind actions.
accessibility: Prefer labelled regions and text status, not color alone.
security: Escape untrusted model and tool text before insertion.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/data-table/data-table.{html,css} + README.md + fixture.html