nuxt-x-affiliate
Comparison Table
Sticky-header vs-competitors table with star ratings, prices, and "Our pick" highlight.
Comparison Table
The XAFComparisonTable component renders a multi-product comparison matrix with a sticky left column (so row labels stay visible while you scroll horizontally on mobile) and a sticky header row. Each product can carry a star rating, price, optional image, and a "highlighted" flag that paints the column amber and adds a "Our pick" pill.
Components
<XAFComparisonTable />
<XAFComparisonTable
title="Wireless keyboards compared"
:products="[
{ name: 'Logitech K1', rating: 4.6, price: 79.99, highlighted: true, href: '/review/k1' },
{ name: 'Keychron K3', rating: 4.3, price: 89.99 },
{ name: 'Apple Magic', rating: 4.1, price: 99.00 },
]"
:rows="[
{ label: 'Battery', values: ['40 hr', { value: '70 hr', note: 'with backlight off' }, '30 days'] },
{ label: 'Hot-swap', values: [true, false, false] },
{ label: 'Price', values: ['$79.99', '$89.99', '$99.00'] },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
products | ComparisonProduct[] | required | Each product carries name, optional image, rating, price, href, and highlighted. |
rows | ComparisonRow[] | required | Each row has label and values[] aligned by index with products. |
title | string | — | Optional heading above the table. |
Cell value shapes
Row values accept string | boolean | number | { value, href?, note? }. Booleans render as ✓ / —. Object values render as a link with an optional note.
AI Context
component: XAFComparisonTable
package: "@xenterprises/nuxt-x-affiliate"
use-when: Sticky-header comparison table with star ratings, prices, and "Our pick" highlight for vs-competitor reviews.