Dark Table
| Firstname |
Email |
Action |
Mary
|
john@example.com |
|
Moe
|
mary@example.com |
|
Dooley
|
july@example.com |
|
<div class="overflow-auto">
<table class="table-auto mb-0 w-full">
<thead class="border border-[var(--border)]">
<tr class="bg-[var(--surface)] text-white">
<th class="px-4 py-2 text-start">Firstname</th>
<th class="px-4 py-2 text-start">Email</th>
<th class="px-4 py-2 text-start">Action</th>
</tr>
</thead>
<tbody class="border border-[var(--border)]">
<tr class="border-b border-[var(--border)] bg-[var(--surface)] text-white">
<td class="inline-flex w-full items-center gap-2 px-4 py-3 text-start">
<span class="relative flex shrink-0">
<img class="w-8 h-8 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-18.jpg" alt="avatar">
<span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span>
</span>
<span class="text-white">Mary</span>
</td>
<td class="px-4 py-3 text-start">john@example.com</td>
<td class="px-4 py-3 text-start">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-[var(--border)] bg-[var(--card)] c-text hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i data-lucide="more-vertical" class="w-4 h-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] rounded-lg mt-2 z-50" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="eye" class="w-4 h-4 me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="square-pen" class="w-4 h-4 me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="trash-2" class="w-4 h-4 me-2"></i>Delete
</a>
</div>
</div>
</div>
</td>
</tr>
<tr class="border-b border-[var(--border)] bg-[var(--surface)] text-white">
<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
<span class="relative flex shrink-0">
<img class="w-8 h-8 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-10.jpg" alt="avatar">
<span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span>
</span>
<span class="text-white">Moe</span>
</td>
<td class="px-4 py-3 text-white">mary@example.com</td>
<td class="px-4 py-3 text-white">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-[var(--border)] bg-[var(--card)] c-text hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i data-lucide="more-vertical" class="w-4 h-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] rounded-lg mt-2 z-50" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="eye" class="w-4 h-4 me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="square-pen" class="w-4 h-4 me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="trash-2" class="w-4 h-4 me-2"></i>Delete
</a>
</div>
</div>
</div>
</td>
</tr>
<tr class="border-b border-[var(--border)] bg-[var(--surface)] text-white">
<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
<span class="relative flex shrink-0">
<img class="w-8 h-8 border border-[var(--border)] rounded-full" src="assets/img/avatars/avatar-03.jpg" alt="avatar">
<span class="bottom-0 end-0.5 absolute size-2 bg-success border border-white rounded-full"></span>
</span>
<span class="text-white">Dooley</span>
</td>
<td class="px-4 py-3 text-white">july@example.com</td>
<td class="px-4 py-3 text-white">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-[var(--border)] bg-[var(--card)] c-text hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i data-lucide="more-vertical" class="w-4 h-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] rounded-lg mt-2 z-50" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="eye" class="w-4 h-4 me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="square-pen" class="w-4 h-4 me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-[var(--surface)] hover:c-gold focus:outline-hidden focus:bg-[var(--card)] hover:bg-primary-50" href="#">
<i data-lucide="trash-2" class="w-4 h-4 me-2"></i>Delete
</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Bordered Table
| Firstname |
Email |
Action |
| John |
john@example.com |
|
| Mary |
mary@example.com |
|
| July |
july@example.com |
|
<div class="overflow-auto">
<table class="table-auto mb-0 w-full">
<thead class="border border-[var(--border)]">
<tr>
<th class="px-4 py-2 bg-[var(--surface)] c-text text-start">Firstname</th>
<th class="px-4 py-2 bg-[var(--surface)] c-text text-start">Email</th>
<th class="px-4 py-2 bg-[var(--surface)] c-text text-start">Action</th>
</tr>
</thead>
<tbody class="border border-[var(--border)]">
<tr class="border border-[var(--border)]">
<td class="border border-[var(--border)] px-4 py-3 text-start">John</td>
<td class="border border-[var(--border)] px-4 py-3 text-start">john@example.com</td>
<td class="border border-[var(--border)] px-4 py-3 text-start">
<button type="button" class="btn-small bg-[var(--surface)] border border-[var(--border)] c-text text-center hover:bg-[var(--card2)] hover:c-text">View</button>
</td>
</tr>
<tr class="border border-[var(--border)]">
<td class="border border-[var(--border)] px-4 py-3 text-start">Mary</td>
<td class="border border-[var(--border)] px-4 py-3 text-start">mary@example.com</td>
<td class="border border-[var(--border)] px-4 py-3 text-start">
<button type="button" class="btn-small bg-[var(--surface)] border border-[var(--border)] c-text text-center hover:bg-[var(--card2)] hover:c-text">View</button>
</td>
</tr>
<tr class="border border-[var(--border)]">
<td class="border border-[var(--border)] px-4 py-3 text-start">July</td>
<td class="border border-[var(--border)] px-4 py-3 text-start">july@example.com</td>
<td class="border border-[var(--border)] px-4 py-3 text-start">
<button type="button" class="btn-small bg-[var(--surface)] border border-[var(--border)] c-text text-center hover:bg-[var(--card2)] hover:c-text">View</button>
</td>
</tr>
</tbody>
</table>
</div>
Striped Rows
| Firstname |
Lastname |
Action |
| John |
john@example.com |
|
| Mary |
mary@example.com |
|
| July |
july@example.com |
|
<div class="overflow-auto">
<table class="table-auto mb-0 w-full">
<thead>
<tr>
<th class="px-4 py-2 bg-[var(--surface)] c-text text-start">Firstname</th>
<th class="px-4 py-2 bg-[var(--surface)] c-text text-start">Lastname</th>
<th class="px-4 py-2 bg-[var(--surface)] c-text text-start">Action</th>
</tr>
</thead>
<tbody>
<tr class="bg-[var(--surface)]">
<td class="px-4 py-3 text-start">John</td>
<td class="px-4 py-3 text-start">john@example.com</td>
<td class="px-4 py-3 text-start">
<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i data-lucide="download" class="w-4 h-4"></i>Success</button>
</td>
</tr>
<tr>
<td class="px-4 py-3 text-start">Mary</td>
<td class="px-4 py-3 text-start">mary@example.com</td>
<td class="px-4 py-3 text-start">
<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i data-lucide="download" class="w-4 h-4"></i>Success</button>
</td>
</tr>
<tr class="bg-[var(--surface)]">
<td class="px-4 py-3 text-start">July</td>
<td class="px-4 py-3 text-start">july@example.com</td>
<td class="px-4 py-3 text-start">
<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i data-lucide="download" class="w-4 h-4"></i>Success</button>
</td>
</tr>
</tbody>
</table>
</div>
