DiffTable

A small data table that plays an AI-proposed edit (removed rows tinted red, one added row tinted green) and lets people include or exclude each change before applying it.

When to use

• Review an agent's proposed bulk edit to tabular data row by row before committing it.
• Show the accept flow: changed rows become toggles, the footer counts removals and additions, and "Apply N changes" confirms.
• Not for code changes — use CodeBlock with variant="Diff". Not for a general sortable or filterable grid — use RecordsTable or FilterTable.

Usage

import DiffTable from "@/components/iris/diff-table/diff-table";

h(DiffTable); // the built-in preview cleanup

h(DiffTable, {
  rows: [
    { key: "pr-131", id: "pr-131", dept: "Preview", email: "nefeli", removed: true },
    { key: "shop", id: "shop", dept: "Production", email: "katerina", removed: false },
  ],
});

Props

Prop	Type	Default	Description
rows	{ key: string; id: string; dept: string; email: string; removed: boolean }[]	3 CapyDB projects	Rows in the table body. id, dept and email fill the Project, Kind and Owner columns, and removed: true marks a row for removal. key must be unique.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• The header ("Proposed preview cleanup"), the column labels (Project, Kind, Owner) and the added row (pr-157 / Preview / katerina) are fixed. Every row with removed: true starts included and toggles on its own. Kind dots exist for Production, Preview and Ephemeral; other values render without a dot colour.
• The proposed edit plays once (about 450ms) and settles on the finished diff.
• Changed rows are focusable and toggle with Enter or Space. The added row has role="checkbox" with aria-checked.
• Reads --surface, --line, --ink, --ink-2, --ink-3, --red/--red-tint, --green/--green-tint and the accent Button.