Start typing to search components and docs…
↵ select ↑ ↓ navigate ESC close

Product Details Table

Part number

6R0071609GRU

6R0.071.609.GRU
6R0-071-609-GRU

6R0 071 609 GRU

PR-CodesPJ4CA2C4E2JZ
ColorBlack
Fitting positionFront axle
Brake disc thicknes22 mm
Weight5.185 kg
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> prcodesArray</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> [</span></span> <span class="line"><span style="color:#E1E4E8"> { code: </span><span style="color:#9ECBFF">"PJ4"</span><span style="color:#E1E4E8">, group: </span><span style="color:#9ECBFF">"BAV"</span><span style="color:#E1E4E8">, description: </span><span style="color:#9ECBFF">"Disk brakes example"</span><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> { code: </span><span style="color:#9ECBFF">"CA2"</span><span style="color:#E1E4E8">, group: </span><span style="color:#9ECBFF">"STF"</span><span style="color:#E1E4E8">, description: </span><span style="color:#9ECBFF">"Standard equipment"</span><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> { code: </span><span style="color:#9ECBFF">"C4E"</span><span style="color:#E1E4E8">, group: </span><span style="color:#9ECBFF">"AAU"</span><span style="color:#E1E4E8">, description: </span><span style="color:#9ECBFF">"Air conditioning"</span><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8">]</span></span> <span class="line"></span> <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> tableItems</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> [</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> id: </span><span style="color:#9ECBFF">"number"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> label: </span><span style="color:#9ECBFF">"Part number"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> value: </span><span style="color:#9ECBFF">"6R0071609GRU"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> id: </span><span style="color:#9ECBFF">"prcodes"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> label: </span><span style="color:#9ECBFF">"PR-Codes"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> value: prcodesArray</span></span> <span class="line"><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> id: </span><span style="color:#9ECBFF">"color"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> label: </span><span style="color:#9ECBFF">"Color"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> value: </span><span style="color:#9ECBFF">"Black"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> id: </span><span style="color:#9ECBFF">"position"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> label: </span><span style="color:#9ECBFF">"Fitting position"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> value: </span><span style="color:#9ECBFF">"Front axle"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> id: </span><span style="color:#9ECBFF">"brake-disck-thicnkess"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> label: </span><span style="color:#9ECBFF">"Brake disc thicknes"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> value: </span><span style="color:#9ECBFF">"22 mm"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> id: </span><span style="color:#9ECBFF">"weight"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> label: </span><span style="color:#9ECBFF">"Weight"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#E1E4E8"> value: </span><span style="color:#9ECBFF">"5.185 kg"</span></span> <span class="line"><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8">];</span></span></code></pre>

Astro:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#79B8FF">ProductDetailsList</span><span style="color:#B392F0"> items</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{tableItems}></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">td</span><span style="color:#B392F0"> slot</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"number"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"pt-0"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">ProductNumber</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"py-0"</span><span style="color:#B392F0"> big</span><span style="color:#B392F0"> isPdp</span><span style="color:#B392F0"> productNumber</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"6R0071609GRU"</span><span style="color:#B392F0"> copyDisabled</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">} /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">td</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">td</span><span style="color:#B392F0"> slot</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"prcodes"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"pt-0"</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">ProductCodes</span><span style="color:#B392F0"> prcodes</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{prcodesArray} /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">td</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#79B8FF">ProductDetailsList</span><span style="color:#E1E4E8">></span></span></code></pre>

Vue:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#79B8FF">ProductDetailsList</span><span style="color:#B392F0"> items</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{tableItems}></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">template</span><span style="color:#FDAEB7;font-style:italic"> #number</span><span style="color:#E1E4E8"> ></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">ProductNumber</span><span style="color:#B392F0"> as</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"td"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"py-0"</span><span style="color:#B392F0"> big</span><span style="color:#B392F0"> isPdp</span><span style="color:#B392F0"> productNumber</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"6R0071609GRU"</span><span style="color:#B392F0"> copyDisabled</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">} /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">template</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">template</span><span style="color:#FDAEB7;font-style:italic"> #prcodes</span><span style="color:#E1E4E8"> ></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#79B8FF">ProductCodes</span><span style="color:#B392F0"> as</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"td"</span><span style="color:#B392F0"> prcodes</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{prcodesArray} /></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;/</span><span style="color:#85E89D">template</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#79B8FF">ProductDetailsList</span><span style="color:#E1E4E8">></span></span></code></pre>

Props

PropTypeDefaultDescription
items*DetailItem[]—Rows for the table. Each item: { id, label, value, type?, isGenericArray? }.
captionstring—Optional table caption.

DetailItem shape

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#F97583">interface</span><span style="color:#B392F0"> DetailItem</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#FFAB70"> id</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Unique row id, also used as slot name</span></span> <span class="line"><span style="color:#FFAB70"> label</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Header label for the row</span></span> <span class="line"><span style="color:#FFAB70"> value</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#F97583"> |</span><span style="color:#79B8FF"> number</span><span style="color:#F97583"> |</span><span style="color:#79B8FF"> boolean</span><span style="color:#F97583"> |</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">[] </span><span style="color:#F97583">|</span><span style="color:#B392F0"> LinkItem</span><span style="color:#E1E4E8">[];</span></span> <span class="line"><span style="color:#FFAB70"> type</span><span style="color:#F97583">?:</span><span style="color:#9ECBFF"> 'links'</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Use 'links' to render value as LinkItem[]</span></span> <span class="line"><span style="color:#FFAB70"> isGenericArray</span><span style="color:#F97583">?:</span><span style="color:#79B8FF"> boolean</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Render string[] as bulleted list</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

Value Types

The component supports multiple value types:

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

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"resources"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> label</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Resources"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> type</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"links"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> value</span><span style="color:#E1E4E8">: [</span></span> <span class="line"><span style="color:#E1E4E8"> { type: </span><span style="color:#9ECBFF">"blog"</span><span style="color:#E1E4E8">, url: </span><span style="color:#9ECBFF">"https://example.com/blog"</span><span style="color:#E1E4E8">, anchor: </span><span style="color:#9ECBFF">"Blog Post"</span><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> { type: </span><span style="color:#9ECBFF">"youtube"</span><span style="color:#E1E4E8">, url: </span><span style="color:#9ECBFF">"https://youtube.com/watch"</span><span style="color:#E1E4E8">, anchor: </span><span style="color:#9ECBFF">"Video Tutorial"</span><span style="color:#E1E4E8"> },</span></span> <span class="line"><span style="color:#E1E4E8"> { type: </span><span style="color:#9ECBFF">"vimeo"</span><span style="color:#E1E4E8">, url: </span><span style="color:#9ECBFF">"https://vimeo.com/123"</span><span style="color:#E1E4E8">, anchor: </span><span style="color:#9ECBFF">"Demo Video"</span><span style="color:#E1E4E8"> }</span></span> <span class="line"><span style="color:#E1E4E8"> ]</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

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:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"position"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> label</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Fitting position"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> isGenericArray</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> value</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Front axle"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"Rear axle"</span><span style="color:#E1E4E8">]</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

HTML Values

The component automatically detects and renders HTML strings:

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"description"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> label</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Description"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> value</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Compatible with &#x3C;span class='font-bold'>multiple models&#x3C;/span>"</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

Simple Values

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

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#E1E4E8">{</span></span> <span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"weight"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> label</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Weight"</span><span style="color:#E1E4E8">,</span></span> <span class="line"><span style="color:#B392F0"> value</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"5.185 kg"</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>

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.