English
Italy
Spain
Arabic
Tables
Documentation and examples for opt-in styling of tables.
Default (less border)
<!-- Table default -->
<table class="table-default table-hover">
<thead>
<tr>
<th>
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" id="checkall" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</th>
<th>Customer</th>
<th>Email</th>
<th>Status</th>
<th>Group</th>
<th>Spend</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>John Smith</td>
<td>
<a href="mailto:john.smith@example.com">john.smith@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
</div>
</td>
<td>$132</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>Jane Doe</td>
<td>
<a href="mailto:jane.doe@example.com">jane.doe@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-blue-500">military_tech</span>Platinum
</div>
</td>
<td>$442</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>Michael Brown</td>
<td>
<a href="mailto:michael.brown@example.com">michael.brown@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-gray-500">military_tech</span>Silver
</div>
</td>
<td>$54</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>Sarah Johnson</td>
<td>
<a href="mailto:sarah.johnson@example.com">sarah.johnson@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
</div>
</td>
<td>$154</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
</tbody>
</table>
Bordered Bottom
|
|
Company | Size | Address | Action | ||
|---|---|---|---|---|---|---|
|
|
|
Acme Inc.Manufacturing |
Large
|
acme@example.com | Roma | edit |
|
|
|
BazaraHealthcare |
Small
|
bazara@example.com | Madrid | edit |
|
|
|
Green Inc.Agriculture |
Large
|
green@example.com | Jakarta | edit |
|
|
|
Zloo CorpTechnology |
Medium
|
zloo@example.com | Barcelona | edit |
<!-- Table bordered bottom -->
<table class="table-bordered-bottom table-hover">
<thead>
<tr>
<th>
<div class="flex items-center justify-center">
<input id="checkall" type="checkbox" name="checked-a" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</th>
<th class="!px-0"></th>
<th>Company</th>
<th>Size</th>
<th>Email</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_a" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td class="!px-0">
<div class="hover:text-orange-500">
<input id="check_01" class="hidden peer toggle-star" type="checkbox" name="check_01" checked="">
<label for="check_01" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
<span class="material-symbols-outlined">star</span>
</label>
</div>
</td>
<td>
<div class="flex items-center gap-3">
<img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
<div class="flex flex-col">
<h4 class="font-semibold">Acme Inc.</h4>
<span class="body-sm text-gray-500">Manufacturing</span>
</div>
</div>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-green-800 bg-green-100 dark:text-green-100 dark:bg-green-800 rounded-full">Large</div>
</td>
<td><a href="mailto:acme@example.com" target="_blank">acme@example.com</a></td>
<td>Roma</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_c" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td class="!px-0">
<div class="hover:text-orange-500">
<input id="check_03" class="hidden peer toggle-star" type="checkbox" name="check_03" checked="">
<label for="check_03" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
<span class="material-symbols-outlined">star</span>
</label>
</div>
</td>
<td>
<div class="flex items-center gap-3">
<img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
<div class="flex flex-col">
<h4 class="font-semibold">Bazara</h4>
<span class="body-sm text-gray-500">Healthcare</span>
</div>
</div>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-yellow-800 bg-yellow-100 dark:text-yellow-100 dark:bg-yellow-800 rounded-full">Small</div>
</td>
<td><a href="mailto:bazara@example.com" target="_blank">bazara@example.com</a></td>
<td>Madrid</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_d" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td class="!px-0">
<div class="hover:text-orange-500">
<input id="check_04" class="hidden peer toggle-star" type="checkbox" name="check_04" checked="">
<label for="check_04" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
<span class="material-symbols-outlined">star</span>
</label>
</div>
</td>
<td>
<div class="flex items-center gap-3">
<img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
<div class="flex flex-col">
<h4 class="font-semibold">Green Inc.</h4>
<span class="body-sm text-gray-500">Agriculture</span>
</div>
</div>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-green-800 bg-green-100 dark:text-green-100 dark:bg-green-800 rounded-full">Large</div>
</td>
<td><a href="mailto:green@example.com" target="_blank">green@example.com</a></td>
<td>Jakarta</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_e" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td class="!px-0">
<div class="hover:text-orange-500">
<input id="check_05" class="hidden peer toggle-star" type="checkbox" name="check_05">
<label for="check_05" class="peer-checked:text-orange-500 hover:cursor-pointer starfill">
<span class="material-symbols-outlined">star</span>
</label>
</div>
</td>
<td>
<div class="flex items-center gap-3">
<img src="../src/img/brand/brand.png" class="w-8 h-8 rounded" alt="title">
<div class="flex flex-col">
<h4 class="font-semibold">Zloo Corp</h4>
<span class="body-sm text-gray-500">Technology</span>
</div>
</div>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-primary-800 bg-primary-100 dark:text-primary-100 dark:bg-primary-800 rounded-full">Medium</div>
</td>
<td><a href="mailto:zloo@example.com" target="_blank">zloo@example.com</a></td>
<td>Barcelona</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
</tbody>
</table>
Table with sorter
<!-- Table default -->
<table class="table-sorter table-default table-hover">
<thead>
<tr>
<th data-sortable="false">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" id="checkall" class="w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</th>
<th data-sortable="false">Customer</th>
<th data-sortable="false">Email</th>
<th>Status</th>
<th>Group</th>
<th>Spend</th>
<th data-sortable="false">Action</th>
</tr>
</thead>
<tbody>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>John Smith</td>
<td>
<a href="mailto:john.smith@example.com">john.smith@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
</div>
</td>
<td>$132</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>Jane Doe</td>
<td>
<a href="mailto:jane.doe@example.com">jane.doe@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-blue-500">military_tech</span>Platinum
</div>
</td>
<td>$442</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>Michael Brown</td>
<td>
<a href="mailto:michael.brown@example.com">michael.brown@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-gray-500">military_tech</span>Silver
</div>
</td>
<td>$54</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
<tr class="[&.selected]:!bg-primary-100 dark:[&.selected]:!bg-primary-700">
<td class="!px-0">
<div class="flex items-center justify-center">
<input type="checkbox" name="check_x" class="checked-item w-[18px] h-[18px] accent-primary-600 hover:accent-primary-600 dark:accent-primary-200 rounded-[2px] cursor-pointer">
</div>
</td>
<td>Sarah Johnson</td>
<td>
<a href="mailto:sarah.johnson@example.com">sarah.johnson@example.com</a>
</td>
<td>
<div class="inline-block leading-tight text-center label-md py-1 px-3 text-gray-800 dark:text-gray-100 bg-green-100 dark:bg-green-900 rounded-full">Active</div>
</td>
<td>
<div class="flex flex-row items-center gap-1">
<span class="material-symbols-outlined !text-base text-yellow-500">military_tech</span>Gold
</div>
</td>
<td>$154</td>
<td><a href="#" class="hover:text-primary-600 dark:hover:text-primary-200">edit</a></td>
</tr>
</tbody>
</table>
<!-- table sorter -->
<script src="../vendors/simple-datatables/dist/umd/simple-datatables.js"></script><!--sort table-->
<script>
const myTablesorter = function () {
const els = document.querySelectorAll(".table-sorter");
if ( els != null) {
for( let i = 0; i < els.length; i++)
{
const table = new simpleDatatables.DataTable((els[i]));
}
};
}
myTablesorter();
</script>