Diff table
A React component in Beamline's Data & tables category.
Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply runs the rest.
Use it for
- Reviewing agent-proposed or imported row changes before applying them.
Not for
Anatomy
- header (title, hint)
- row: include checkbox (inline start, carries a 2px change-colour edge), change mark (+ added, − removed, ✎ changed, with its word for screen readers), cells (old → new for a changed cell)
- footer (counts, Apply)
States
- proposed (tint + edge + mark per change; text stays ink)
- removed (struck through)
- left out (no tint or edge, neutral mark, ink-3 text, no strike)
- applying
- applied
- failed
Keyboard
- Checkboxes and Apply are focusable
Motion
Rows fade in one after another once (stagger-line); none with reduced motion. Including or leaving out a change repaints at once.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | |
columns | { key, label, mono? }[] | — | |
rows | { id, change, values, before? }[] | — | |
selected / defaultSelected / onSelectedChange | string[] | — | |
onApply | (ids) => void | Promise | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | DiffTableClassNames | — |
Import
import { DiffTable } from "@/components/diff-table/diff-table";Get it
Diff table is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Data & tables
- Data grid: Virtualised grid for thousands of rows: multi-sort, search and value filters, resizable and pinnable columns, range selection, inline edit, footer…
- Filter toolbar: The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls.
- Import mapping: Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row…
- Table: A plain, styled HTML table for small static data: header, body, footer, caption, numeric cells, three densities and a sticky header.