nuxt-x-affiliate
Specs Table
Product spec sheet with optional grouping by category — boolean values render as Yes/No.
Specs Table
The XAFSpecsTable component renders a product spec sheet as a definition list — typically used to show the dimensions, weight, materials, and features of a product. Optional grouping by row.group renders section headers between related specs.
Components
<XAFSpecsTable />
<XAFSpecsTable
title="Tech specs"
:rows="[
{ group: 'Physical', label: 'Weight', value: '506 g', hint: 'Without cable' },
{ group: 'Physical', label: 'Layout', value: '104 keys' },
{ group: 'Physical', label: 'Hot-swap', value: true, hint: 'Switches can be swapped without soldering' },
{ group: 'Connectivity', label: 'Wireless', value: 'Bluetooth 5.1 + 2.4 GHz USB receiver' },
{ group: 'Connectivity', label: 'Battery', value: 'Up to 10 days' },
{ group: 'Connectivity', label: 'Cable', value: 'USB-C' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | SpecRow[] | required | Each row: { label, value, group?, hint? }. value is string | number | boolean. |
group | boolean | true | Group rows by their group field. |
title | string | — | Optional heading above the table. |
Boolean values render as "Yes" / "No". Number values render as their string form.
AI Context
component: XAFSpecsTable
package: "@xenterprises/nuxt-x-affiliate"
use-when: Product spec sheet as definition list with optional grouping by category. Boolean values render as Yes/No.