Professional Table with Extended Technical Specifications (Finder v1 view)
Demonstrates comprehensive technical data display in a clean table format, featuring Center Bore,
Bolt Pattern (PCD), and Thread Size specifications alongside standard tire and rim information.
technical specifications
table layout
center bore
bolt pattern
PCD
thread size
professional display
wheel fitment
technical data
comprehensive specs
Widget Preview
Loading widget...
- Widget Type
- Wheel Fitment Finder
Demo Details:
This demo showcases the Professional Table template enhanced with complete technical
specifications essential for wheel fitment and purchasing decisions.
š Custom Output Template
This custom template shows how to display widget data with dynamic variables:
<div class="bg-background-color shadow-sm rounded-lg overflow-hidden">
<div class="px-6 py-4 bg-secondary-color/10 border-b border-secondary-color">
<h3 class="text-lg font-medium text-main-color">
{{ make.name }} {{ model.name }} ({{ start_year }}-{{ end_year }}) ā¢ {{ engine.capacity }}
{{ engine.type }} {{ engine.fuel }} {{ engine.power.hp }}hp
</h3>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-secondary-color">
<thead class="bg-secondary-color/10">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-secondary-color uppercase
tracking-wider">Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-secondary-color uppercase
tracking-wider">Tire Size</th>
<th class="px-6 py-3 text-left text-xs font-medium text-secondary-color uppercase
tracking-wider">Rim Size</th>
<th class="px-6 py-3 text-left text-xs font-medium text-secondary-color uppercase
tracking-wider">Center Bore</th>
<th class="px-6 py-3 text-left text-xs font-medium text-secondary-color uppercase
tracking-wider">Bolt Pattern (PCD)</th>
<th class="px-6 py-3 text-left text-xs font-medium text-secondary-color uppercase
tracking-wider">Thread Size</th>
</tr>
</thead>
<tbody class="bg-background-color divide-y divide-secondary-color">
{% for wheel in wheels %}
<tr class="{% if wheel.is_stock %}bg-primary-color/10{% else
%}hover:bg-secondary-color/10{% endif %}">
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {% if
wheel.is_stock %}bg-primary-color/20 text-primary-color{% else %}bg-secondary-color/20
text-secondary-color{% endif %}">
{% if wheel.is_stock %}Original Equipment{% else %}Optional Equipment{% endif %}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-main-color">
{{ wheel.front.tire }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-color">
{{ wheel.front.rim }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-color">
{% if technical.centre_bore %}
{{ technical.centre_bore }}mm
{% else %}
<span class="text-secondary-color/50">ā</span>
{% endif %}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-color">
{{ technical.bolt_pattern }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-secondary-color">
{{ technical.wheel_fasteners.thread_size }}
</td>
</tr>
{% if not wheel.showing_fp_only %}
<tr class="bg-secondary-color/10">
<td class="px-6 py-2 text-xs text-secondary-color">ā Rear</td>
<td class="px-6 py-2 text-xs text-secondary-color">{{ wheel.rear.tire }}</td>
<td class="px-6 py-2 text-xs text-secondary-color">{{ wheel.rear.rim }}</td>
<td class="px-6 py-2 text-xs text-secondary-color" colspan="3">
<span class="text-secondary-color/70 italic">Same as front</span>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>