react-table-diff

A React component for row & cell level table diff — beyond line-by-line text diff.

✨ Highlights

• 🔍 Row & Cell Diff — Added, modified, deleted, and unchanged rows with inline old → new highlighting
• 🪄 Smart Ordering — Deleted rows appear at their original position, not lumped at the end
• 🎨 Themeable — CSS custom properties compatible with @git-diff-view, dark mode ready
• 🛡️ Zero Dependencies — Only React as a peer dependency
• ⚡ Universal — ESM + CJS + TypeScript declarations

🌱 Install

npm install react-table-diff

🚀 Quick Start

import { TableDiff, computeTableDiff } from 'react-table-diff';

const oldRows = [
  { id: '1', name: 'Alice', email: '[email protected]' },
  { id: '2', name: 'Bob',   email: '[email protected]' },
  { id: '3', name: 'Charlie', email: '[email protected]' },
];

const newRows = [
  { id: '1', name: 'Alice', email: '[email protected]' },  // modified
  { id: '2', name: 'Bob',   email: '[email protected]' },        // unchanged
  { id: '4', name: 'Diana', email: '[email protected]' },      // added
  // id: '3' (Charlie) is deleted
];

const diff = computeTableDiff({
  oldRows,
  newRows,
  columns: ['name', 'email'],
  rowKey: 'id',
});

function App() {
  return (
    <TableDiff
      diff={diff}
      columns={[
        { id: 'name', label: 'Name' },
        { id: 'email', label: 'Email' },
      ]}
    />
  );
}

🧩 API

computeTableDiff(options)

Pure function that computes the diff between two sets of rows.

| Option | Type | Default | Description | |-----------|-----------------------------|----------|----------------------------------------| | oldRows | Record<string, unknown>[] | — | Rows from the base version | | newRows | Record<string, unknown>[] | — | Rows from the current version | | columns | string[] | all keys | Column ids to compare | | rowKey | string | "id" | Key used to match rows across versions |

Returns a TableDiffResult:

interface TableDiffResult {
  addedRows: DiffRow[];
  modifiedRows: ModifiedDiffRow[];
  deletedRows: DiffRow[];
  unchangedRows: DiffRow[];
  rows: TaggedDiffRow[];  // all rows in display order
}

💡 The rows array follows the new table's row order, with deleted rows inserted at their original position relative to surviving neighbours.

<TableDiff />

| Prop | Type | Description | |--------------|---------------------------------------------------------|--------------------------------| | diff | TableDiffResult | Result from computeTableDiff | | columns | DiffColumn[] | Column definitions { id, label } | | labels | { noChanges?: string } | Custom labels | | renderCell | (value, columnId, row) => ReactNode \| undefined | Custom cell renderer | | className | string | CSS class for root element |

🎨 Theming

Colors are controlled via CSS custom properties, compatible with @git-diff-view/react:

:root {
  --diff-add-content--: #dafbe1;
  --diff-add-content-highlight--: #aceebb;
  --diff-add-lineNumber--: #aceebb;
  --diff-del-content--: #ffebe9;
  --diff-del-content-highlight--: #ffcecb;
  --diff-del-lineNumber--: #ffcecb;
  --diff-plain-content--: #fff;
  --diff-plain-lineNumber--: #fafafa;
  --diff-plain-lineNumber-color--: #555;
  --diff-hunk-content-color--: #777;
  --diff-border--: #dedede;
}

[data-theme="dark"] {
  --diff-add-content--: #253d38;
  --diff-add-content-highlight--: #306e58;
  --diff-add-lineNumber--: #253d38;
  --diff-del-content--: #402830;
  --diff-del-content-highlight--: #6e3848;
  --diff-del-lineNumber--: #402830;
  --diff-plain-content--: #262c3a;
  --diff-plain-lineNumber--: #2c3348;
  --diff-plain-lineNumber-color--: #a0aec0;
  --diff-hunk-content-color--: #a0aec0;
  --diff-border--: #3a4560;
}

🐣 Example

cd examples/basic
npm install
npm run dev

Opens a demo at http://localhost:5173 with sample data and a dark mode toggle.

🛸 License

MIT