Implementation:TobikoData Sqlmesh TableDiff

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Data_Visualization, Plan_Management
Last Updated	2026-02-07 20:00 GMT

Overview

A React component that visualizes table differences between source and target datasets during SQLMesh plan operations.

Description

TableDiff renders a comprehensive visual comparison of table data showing row-level and column-level changes between source and target environments. The component displays schema differences (added/removed/modified columns), data differences (added/removed/modified rows), and provides interactive filtering to focus on specific types of changes. It uses a color-coded system to distinguish between grain columns, changed values, added data, and deleted data.

The component includes a collapsible statistics panel showing row count changes, column changes, and modification percentages. Each cell can display side-by-side source/target values for modified columns, and the grain columns (join keys) are highlighted for easy identification.

Usage

Use this component in the SQLMesh plan page when displaying table diff results to users. It's automatically invoked when users request to see data-level differences between environments during plan review or when examining model changes that affect data outputs.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/tableDiff/TableDiff.tsx

Signature

export default function TableDiff({
  diff
}: {
  diff: any
}): JSX.Element

export interface Filters extends Record<string, boolean> {
  modifiedRows: boolean
  addedRows: boolean
  removedRows: boolean
  modifiedColumns: boolean
  addedColumns: boolean
  removedColumns: boolean
}

Import

import TableDiff from '@components/tableDiff/TableDiff'

I/O Contract

Inputs

Name	Type	Required	Description
diff	any	Yes	Diff object containing schema_diff, row_diff, and on (grain columns)
diff.schema_diff	object	Yes	Contains source_schema, target_schema, added, removed column information
diff.row_diff	object	Yes	Contains sample data with source/target values
diff.on	string[][]	Yes	Grain columns used as join keys

Outputs

Name	Type	Description
JSX.Element	React Component	Rendered table diff visualization with filters and legend

Usage Examples

// Basic usage with diff data from API
const diffData = {
  schema_diff: {
    source_schema: { id: 'INTEGER', name: 'VARCHAR' },
    target_schema: { id: 'INTEGER', name: 'VARCHAR', email: 'VARCHAR' },
    added: { email: 'VARCHAR' },
    removed: {},
  },
  row_diff: {
    count_pct_change: 15.5,
    sample: {
      source: {
        '1': { id: 1, name: 'Alice' },
        '2': { id: 2, name: 'Bob' },
      },
      target: {
        '1': { id: 1, name: 'Alice', email: 'alice@example.com' },
        '3': { id: 3, name: 'Charlie', email: 'charlie@example.com' },
      },
    },
  },
  on: [['id']],
}

<TableDiff diff={diffData} />

// Displaying in a plan review context
function PlanReview({ planId }) {
  const { data: tableDiff } = useApiTableDiff(planId)

  if (!tableDiff) return <Loading />

  return (
    <div className="h-full flex flex-col">
      <h2>Table Differences</h2>
      <TableDiff diff={tableDiff} />
    </div>
  )
}

Component Features

Color Coding

Brand (Blue): Grain columns (join keys)
Primary (Purple): Modified values
Success (Green): Added rows/columns
Danger (Red): Removed rows/columns

Statistics Panel

The collapsible stats panel displays:

Row count percentage change
Number of modified/added/deleted rows
Number of modified/added/deleted columns

Filtering System

Users can toggle visibility of:

Modified rows
Added rows
Removed rows
Modified columns
Added columns
Removed columns

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment