Product Details Table

 const tableItems = [
  {
    id: "number",
    name: "Part number",
    value: "6R0071609GRU",
  },
  {
    id: "prcodes",
    name: "PR-Codes",
    value: ["PJ4", "CA2", "C4E"]
  },
  {
    id: "color",
    name: "Color",
    value: "Black",
  },
  {
    id: "position",
    name: "Fitting position",
    value: "Front axle",
  },
  {
    id: "brake-disck-thicnkess",
    name: "Brake disc thicknes",
    value: "22 mm",
  },
  {
    id: "weight",
    name: "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>