Two-column and three-column comparison patterns for version control, data changes, and A/B comparisons.
Detalle de versión (2 columnas)
| # | Valores base | Nuevos valores |
|---|---|---|
| País ISO 2 |
be
|
be
|
| Región | ||
| Subregión | ||
| Ciudad |
Beveren
|
Antwerpen
|
| Código postal |
9130
|
2018
|
| Nombre completo de la calle | ||
| Núm. de calle | ||
| Subnúm. de calle | ||
| Núm. adic. de calle | ||
| Línea de dirección 1 |
Ketenislaan 1
|
Desguinlei 100
|
| Línea de dirección 2 | ||
| Línea de dirección 3 | ||
| Línea de dirección 4 | ||
| Línea de dirección 5 | ||
| Línea de dirección 6 | ||
| Línea de dirección 7 | ||
| Línea de dirección 8 | ||
| Metadatos de dirección | ||
| Nombre de la ubicación de origen |
2243544870:Beveren:Ketenislaan 1
|
2243544870:Antwerpen:Desguinlei 100
|
| Está activo | ||
| Coordenadas (lat,lng) | ||
Comparación de fusión (3 columnas)
| # | Base | Cambiar A | Cambiar B |
|---|---|---|---|
| Información de contacto | |||
| Correo electrónico |
john.doe@company.com
|
john.doe@newcompany.com
|
john.doe@company.com
|
| Teléfono |
+32 123 456 789
|
+32 123 456 789
|
+32 987 654 321
|
| Departamento |
Sales
|
Marketing
|
Engineering
|
| Detalles del empleo | |||
| Fecha de inicio |
2020-01-15
|
2020-01-15
|
2020-01-15
|
| Estado | Active | Active | Active |
Detalle de versión (variante de fondo sólido)
Using pa-comparison-table__changed--solid for uniform background highlighting without left border accent
| # | Valores base | Nuevos valores |
|---|---|---|
| País ISO 2 |
be
|
be
|
| Ciudad |
Beveren
|
Antwerpen
|
| Código postal |
9130
|
2018
|
| Línea de dirección 1 |
Ketenislaan 1
|
Desguinlei 100
|
Notas de implementación
Clases de componente
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