# Diff table

A React component in [Beamline](https://beamline.io/)'s [Data & tables](https://beamline.io/components/data) category. Live demo: https://beamline.io/components/diff-table

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

- Code changes ([file-diff](https://beamline.io/components/file-diff)).
- Editing data directly ([data-grid](https://beamline.io/components/data-grid)).

## 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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Data & tables

- [Data grid](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/table): A plain, styled HTML table for small static data: header, body, footer, caption, numeric cells, three densities and a sticky header.