Two-column and three-column comparison patterns for version control, data changes, and A/B comparisons.
Version Detail (2-Column)
| # | Base values | New values |
|---|---|---|
| Country Iso 2 |
be
|
be
|
| Region | ||
| Subregion | ||
| Town |
Beveren
|
Antwerpen
|
| Postal Code |
9130
|
2018
|
| Street Full Name | ||
| Street Num. | ||
| Street Sub Num. | ||
| Street Add. Num. | ||
| Address line 1 |
Ketenislaan 1
|
Desguinlei 100
|
| Address line 2 | ||
| Address line 3 | ||
| Address line 4 | ||
| Address line 5 | ||
| Address line 6 | ||
| Address line 7 | ||
| Address line 8 | ||
| Address metadata | ||
| Source Location Name |
2243544870:Beveren:Ketenislaan 1
|
2243544870:Antwerpen:Desguinlei 100
|
| Is active | ||
| Coordinates (lat,lng) | ||
Merge Comparison (3-Column)
| # | Base | Change A | Change B |
|---|---|---|---|
| Contact Information | |||
|
john.doe@company.com
|
john.doe@newcompany.com
|
john.doe@company.com
|
|
| Phone |
+32 123 456 789
|
+32 123 456 789
|
+32 987 654 321
|
| Department |
Sales
|
Marketing
|
Engineering
|
| Employment Details | |||
| Start Date |
2020-01-15
|
2020-01-15
|
2020-01-15
|
| Status | Active | Active | Active |
Version Detail (Solid Background Variant)
Using pa-comparison-table__changed--solid for uniform background highlighting without left border accent
| # | Base values | New values |
|---|---|---|
| Country Iso 2 |
be
|
be
|
| Town |
Beveren
|
Antwerpen
|
| Postal Code |
9130
|
2018
|
| Address line 1 |
Ketenislaan 1
|
Desguinlei 100
|
Implementation Notes
Component Classes
pa-comparison-table- Apply to table elementpa-comparison-table__label- Field name columnpa-comparison-table__value- Wrapper for value + copy buttonpa-comparison-table__copy- Copy button stylingpa-comparison-table__changed- Pink highlight for changed values (light bg + left border)pa-comparison-table__changed--solid- Solid pink background (no left border accent)pa-comparison-table__conflict- Orange highlight for merge conflictspa-comparison-table__conflict--solid- Solid orange background (no left border accent)pa-comparison-table__section- Section header row
Features
- ✅ 2-column comparison (Base vs New)
- ✅ 3-column comparison (Base vs A vs B)
- ✅ Section headers for grouping fields
- ✅ Copy buttons for each value
- ✅ Highlighted changes (pink background)
- ✅ Conflict highlighting (orange background)
- ✅ Status indicators (checkmarks, badges)
- ✅ Empty row preservation for structure
JavaScript Integration
// Copy button functionality
document.querySelectorAll('.pa-comparison-table__copy').forEach(btn => {
btn.addEventListener('click', function() {
const value = this.previousElementSibling.textContent;
navigator.clipboard.writeText(value);
// Show toast notification
});
});