Product Details Table

const prcodesArray = [
  { code: "PJ4", group: "BAV", description: "Disk brakes example" },
  { code: "CA2", group: "STF", description: "Standard equipment" },
  { code: "C4E", group: "AAU", description: "Air conditioning" }
]

const tableItems = [
  {
    id: "number",
    label: "Part number",
    value: "6R0071609GRU",
  },
  {
    id: "prcodes",
    label: "PR-Codes",
    value: prcodesArray
  },
  {
    id: "color",
    label: "Color",
    value: "Black",
  },
  {
    id: "position",
    label: "Fitting position",
    value: "Front axle",
  },
  {
    id: "brake-disck-thicnkess",
    label: "Brake disc thicknes",
    value: "22 mm",
  },
  {
    id: "weight",
    label: "Weight",
    value: "5.185 kg"
  }
];

Astro:

<ProductDetailsList items={tableItems}>
  <td slot="number" class="pt-0">
    <ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false} />
  </td>
  <td slot="prcodes" class="pt-0">
    <ProductCodes prcodes={prcodesArray} />
  </td>
</ProductDetailsList>

Vue:

<ProductDetailsList items={tableItems}>
  <template #number >
    <ProductNumber as="td" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
  </template>
  <template #prcodes >
    <ProductCodes as="td" prcodes={prcodesArray} />
  </template>
</ProductDetailsList>

Props

items

Array of table items with the following structure:

• id (string): Unique identifier for the row, also used for slot names
• label (string): Display name for the table header
• value (unknown): The value to display - can be string, number, boolean, string array, or Link array
• type (optional string): Set to 'links' for link arrays
• isGenericArray (optional boolean): Set to true for generic string arrays

caption

Optional string for the table caption.

Value Types

The component supports multiple value types:

Link Arrays

Use type: 'links' to display an array of links with icons:

{
  id: "resources",
  label: "Resources",
  type: "links",
  value: [
    { type: "blog", url: "https://example.com/blog", anchor: "Blog Post" },
    { type: "youtube", url: "https://youtube.com/watch", anchor: "Video Tutorial" },
    { type: "vimeo", url: "https://vimeo.com/123", anchor: "Demo Video" }
  ]
}

Supported link types with icons:

• blog - Book text icon
• youtube - YouTube icon
• vimeo - Vimeo icon
• Default - Generic link icon

Generic String Arrays

Use isGenericArray: true to display a bulleted list:

{
  id: "position",
  label: "Fitting position",
  isGenericArray: true,
  value: ["Front axle", "Rear axle"]
}

HTML Values

The component automatically detects and renders HTML strings:

{
  id: "description",
  label: "Description",
  value: "Compatible with <span class='font-bold'>multiple models</span>"
}

Simple Values

Strings, numbers, and booleans are displayed as-is:

{
  id: "weight",
  label: "Weight",
  value: "5.185 kg"
}

Slots

caption

Override the default caption with custom content.

Row-specific slots

Use the row’s id as the slot name to override the default value rendering. The slot receives the entire row as slot props.