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
});
});