How to show change diffs of a CSV file?
In this post, we’ll explore how to show change diffs in CSV files, particularly focusing on challenges and insights from implementing a CSV app that tracks data history.
Check out Part I:
What Is a Diff View? 🤔
A diff view shows the differences between two versions of data. From our research in other domains, it’s clear that diff views must be adapted to the content. A one-size-fits-all approach doesn’t work.
For example, in a Translation Management System (TMS), it's essential to have the reference content in the source language to properly review and understand a translation. Variants, selectors, or IDs may also be important depending on the specific changes.
Other formats, like SVG files, require different approaches, like side-by-side comparisons or slider views to overlay images. It’s also important to customize the display—for instance, using different background colors or contrasts to highlight changes clearly.
Insights
Diff views Aren’t Universal: There’s no single "golden rule" for showing differences in data. What works for a text file (see Github text diff views) may not suit a CSV file or SVG.
Context Matters: A diff view on a single CSV cell may not provide meaningful insight unless viewed in the larger context of the row or column.
Content-Specific Diff views: How differences are displayed often depends on the content. For example, in a CSV with numbers, highlighting computed values or changes in references requires a more sophisticated approach than simply showing added or removed text.
Current State of the Implementation
The current app shows diffs grouped by rows, allowing you to see all changes for a specific row together. We display the new value on top and the old value underneath.
For simplicity, we chose not to show unchanged cells in the UI to avoid clutter. However, this does mean some context is lost, which could be improved in future iterations.
Try out our demo.
History view
Row creation
How context complexity kicks in
Simple Text: For customer data, when someone’s name is changed, the diff view could show the change with the old name in red and the new name in green.
Example: John Doe → John A. Doe
Numerical Changes: In financial data, it’s useful to show not only the number that changed, but also the percentage difference to give context.
Example: 500 → 600 (+20%)
Computed Values: For spreadsheet-like CSVs, where cells depend on formulas, it’s important to show how a change in one cell affects related computed values.
Example: A change in A3 might adjust the total in a SUM formula.
Reference-Based Data: If a CSV uses references, such as product IDs, the diff view should include what those references represent to give meaning to the change.
Example: ProductID 123 → ProductID 124 (showing that "Widget A" was replaced by "Widget B").
These examples show that while basic text or number changes are easy to visualize, table apps may contain more complex data, like computed values or references and require a more thoughtful approach to diffing.
Next steps:
Collaboration sync/async
Discussions
Authors:
Nils Jacobsen, Design Engineer @Opral & Jannes Blobel, Interaction Designer @Opral
 | A guest post by
|