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 | ||
| Address line 1 | Ketenislaan 1 | Desguinlei 100 |
| Address metadata | ||
| Source Location Name | 2243544870:Beveren:Ketenislaan 1 | 2243544870:Antwerpen:Desguinlei 100 |
| Is active | ||
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
});
});