File size: 1,573 Bytes
5a612e9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | {# Data Table Component
Usage: {% include "components/data_table.html" with table_id="users-table" %}
Define table content via block or pass rows context.
#}
<div class="overflow-hidden rounded-xl bg-[--card] border border-[--border] shadow-sm">
<div class="overflow-x-auto">
<table id="{{ table_id|default('data-table') }}" class="min-w-full divide-y divide-[--border]">
<thead class="bg-[--muted]/30">
<tr>
{% for header in headers %}
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-[--muted-foreground] uppercase tracking-wider">{{ header }}</th>
{% endfor %}
</tr>
</thead>
<tbody class="divide-y divide-[--border]">
{% block table_body %}
{% if rows %}
{% for row in rows %}
<tr class="hover:bg-[--muted]/20 transition-colors">
{% for cell in row %}
<td class="px-6 py-4 whitespace-nowrap text-sm text-[--foreground]">{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="{{ headers|length|default:3 }}" class="px-6 py-12 text-center text-sm text-[--muted-foreground]">No data available</td>
</tr>
{% endif %}
{% endblock %}
</tbody>
</table>
</div>
</div>
|