Skip to documentation content
|

Diff Table

Review the rows an agent proposes to add or remove, clear the ones you do not want, and apply the rest.

diff-table-demo

Overview

Diff Table shows edits an agent proposes to a table, one row for each addition and removal, with unchanged rows for context. Every change starts selected. The person clears the ones they do not want and applies the rest.

onApply receives the ids of the changes that stayed selected. Making the edits is your application's work.

Use Change Review for field-by-field changes to one object.

Anatomy
DiffTable
  • TitleWhat the edit is
  • Change columnA checkbox and the word Add or Remove on each changed row
  • RowsChanged rows, tinted while selected, and unchanged rows
  • FooterA count of what is selected, and Apply

Installing diff-table brings Button, Checkbox, and Table along as registry dependencies.

Behavior

Selecting changes

A selected addition is tinted green and a selected removal is tinted red with its cells struck through. Clearing a change removes the tint, and the row is left as it is today. The footer counts what is selected, and Apply is disabled when nothing is.

Applying

If onApply returns a promise, Apply shows progress and the checkboxes lock until it settles. When it resolves, the footer confirms how many changes were applied. When it rejects, the footer shows an error and keeps the selection.

Accessibility

The table uses native markup with column headers and is named by its title. Each changed row has a real checkbox, named for what it does, such as "Include removing fax_number". The word Add or Remove is in the row, so the tint is never the only cue.

The footer's count is a polite status, so it is announced as the selection changes. The error is an alert.

KeyAction
TabMove across the checkboxes and Apply
SpaceSelect or clear the focused change
Enter or SpaceApply

Installation
npx honestui@latest add https://ai.honestui.com/r/diff-table.json

Usage

 
import { DiffTable } from "@/components/ai/diff-table"

<DiffTable
  title="Proposed changes to the customers table"
  columns={[
    { id: "column", header: "Column" },
    { id: "type", header: "Type" },
  ]}
  rows={proposal.rows}
  onApply={(rowIds) => agent.applyEdits(proposal.id, rowIds)}
/>

Examples

An apply that fails

This preview rejects the first apply. The selection stays, and the second apply succeeds.

diff-table-failure

API reference

DiffTable

Accepts native div props beyond those listed.

PropTypeDefaultDescription
titlestringRequiredWhat the edit is.
columnsDiffTableColumn[]RequiredEach has id and header.
rowsDiffTableRow[]RequiredChanged and unchanged rows, in order.
onApply(includedRowIds: string[]) => void | Promise<void>RequiredReceives the selected changes.
labelsPartial<DiffTableLabels>EnglishColumn name, change words, checkbox names, and footer messages.

Types

ExportShape
DiffTableRowid, change of "unchanged", "added", or "removed", name, and cells keyed by column id