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
Email
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 element
  • pa-comparison-table__label - Field name column
  • pa-comparison-table__value - Wrapper for value + copy button
  • pa-comparison-table__copy - Copy button styling
  • pa-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 conflicts
  • pa-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
    });
});
Type to search or use /p for products, /o for orders, /u for users, /i for invoices

Settings

👤

John Doe

Administrator