Tailwind CSS Table - Nuanxa
Komponen table digunakan untuk menampilkan data dalam format terstruktur. Komponen ini mendukung berbagai gaya dan dapat dengan mudah dikustomisasi.
Default table
Table default dengan gaya dan struktur dasar.
| Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-100 dark:bg-gray-600">
<tr>
<th class="px-4 py-3">Full Name</th>
<th class="px-4 py-3">Industry</th>
<th class="px-4 py-3 text-center">Status</th>
<th class="px-4 py-3 text-center">Location</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
</div>
</div>
Striped table
Table dengan warna baris bergantian untuk keterbacaan yang lebih baik.
| Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-100 dark:bg-gray-600">
<tr>
<th class="px-4 py-3">Full Name</th>
<th class="px-4 py-3">Industry</th>
<th class="px-4 py-3 text-center">Status</th>
<th class="px-4 py-3 text-center">Location</th>
</tr>
</thead>
<tbody>
<tr
class="border-t border-gray-200 dark:border-gray-700 odd:bg-white even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-600"
>
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 odd:bg-white even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-600"
>
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 odd:bg-white even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-600"
>
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 odd:bg-white even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-600"
>
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 odd:bg-white even:bg-gray-100 dark:odd:bg-gray-800 dark:even:bg-gray-600"
>
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
</div>
</div>
Hoverable table
Table yang menyorot baris saat hover untuk interaktivitas yang lebih baik.
| Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-100 dark:bg-gray-600">
<tr>
<th class="px-4 py-3">Full Name</th>
<th class="px-4 py-3">Industry</th>
<th class="px-4 py-3 text-center">Status</th>
<th class="px-4 py-3 text-center">Location</th>
</tr>
</thead>
<tbody>
<tr
class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr
class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"
>
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
</div>
</div>
Table with filter
Table dengan opsi filter untuk mencari dan menampilkan baris tertentu.
| Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow rounded-2xl overflow-hidden"
>
<div class="flex justify-end p-4">
<!-- Filter -->
<div class="relative inline-block text-left">
<button
data-dropdown-toggle="dropdown-default"
class="w-auto px-3 py-1.5 text-md font-medium rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 transition"
>
<span class="fas fa-filter me-3"></span>
Filter By
<span class="fas fa-chevron-down text-xs ms-2"></span>
</button>
<ul
id="dropdown-default"
class="dropdown-menu hidden absolute top-10 right-0 w-full bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-700 shadow-lg z-50"
>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Name
</a>
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Status
</a>
</li>
<li>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
>
Date
</button>
</form>
</li>
</ul>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-100 dark:bg-gray-600">
<tr>
<th class="px-4 py-3">Full Name</th>
<th class="px-4 py-3">Industry</th>
<th class="px-4 py-3 text-center">Status</th>
<th class="px-4 py-3 text-center">Location</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
</div>
</div>
Table with sort
Table dengan fitur sorting untuk mengatur data.
Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-100 dark:bg-gray-600">
<tr>
<th class="px-4 py-3">
<div class="flex items-center">
Full Name
<span class="flex flex-col ms-1">
<i class="fa-solid fa-caret-up text-[0.50rem] cursor-pointer"
></i>
<i class="fa-solid fa-caret-down text-[0.50rem] cursor-pointer"
></i>
</span>
</div>
</th>
<th class="px-4 py-3">
<div class="flex items-center">
Industry
<span class="flex flex-col ms-1">
<i class="fa-solid fa-caret-up text-[0.50rem] cursor-pointer"
></i>
<i class="fa-solid fa-caret-down text-[0.50rem] cursor-pointer"
></i>
</span>
</div>
</th>
<th class="px-4 py-3 text-center">
<div class="flex items-center justify-center">
Status
<span class="flex flex-col ms-1">
<i class="fa-solid fa-caret-up text-[0.50rem] cursor-pointer"
></i>
<i class="fa-solid fa-caret-down text-[0.50rem] cursor-pointer"
></i>
</span>
</div>
</th>
<th class="px-4 py-3 text-center">
<div class="flex items-center justify-center">
Location
<span class="flex flex-col ms-1">
<i class="fa-solid fa-caret-up text-[0.50rem] cursor-pointer"
></i>
<i class="fa-solid fa-caret-down text-[0.50rem] cursor-pointer"
></i>
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
</div>
</div>
Table with search
Table dengan opsi pencarian untuk menemukan baris tertentu.
| Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
<div class="flex justify-end p-4">
<div class="relative autofill-light dark:autofill-dark">
<i
class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
></i>
<input
type="search"
placeholder="Search..."
class="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-100 dark:bg-gray-600">
<tr>
<th class="px-4 py-3">Full Name</th>
<th class="px-4 py-3">Industry</th>
<th class="px-4 py-3 text-center">Status</th>
<th class="px-4 py-3 text-center">Location</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr class="border-t border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
</div>
</div>
Table with pagination
Table dengan kontrol pagination untuk menavigasi dataset besar.
| Full Name | Industry | Status | Location |
|---|---|---|---|
| John Anderson john.a@email.com | Real Estate | Active | New York, USA |
| Maria Gonzalez maria.g@email.com | E-commerce | Active | Madrid, Spain |
| David Miller david.m@email.com | Technology | Active | London, UK |
| Aisha Rahman aisha.r@email.com | Finance | Inactive | Dubai, UAE |
| Kenji Tanaka kenji.t@email.com | Marketing | Active | Tokyo, Japan |
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-2xl overflow-hidden"
>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead
class="bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-700"
>
<tr>
<th class="px-4 py-3">Full Name</th>
<th class="px-4 py-3">Industry</th>
<th class="px-4 py-3 text-center">Status</th>
<th class="px-4 py-3 text-center">Location</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
John Anderson<br />
<span class="text-xs text-gray-500">john.a@email.com</span>
</td>
<td class="px-4 py-3">Real Estate</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">New York, USA</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Maria Gonzalez<br />
<span class="text-xs text-gray-500">maria.g@email.com</span>
</td>
<td class="px-4 py-3">E-commerce</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Madrid, Spain</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
David Miller<br />
<span class="text-xs text-gray-500">david.m@email.com</span>
</td>
<td class="px-4 py-3">Technology</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">London, UK</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Aisha Rahman<br />
<span class="text-xs text-gray-500">aisha.r@email.com</span>
</td>
<td class="px-4 py-3">Finance</td>
<td class="px-4 py-3 text-center">
<span class="bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs"
>Inactive</span
>
</td>
<td class="px-4 py-3 text-center">Dubai, UAE</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<td class="px-4 py-3">
Kenji Tanaka<br />
<span class="text-xs text-gray-500">kenji.t@email.com</span>
</td>
<td class="px-4 py-3">Marketing</td>
<td class="px-4 py-3 text-center">
<span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs"
>Active</span
>
</td>
<td class="px-4 py-3 text-center">Tokyo, Japan</td>
</tr>
</tbody>
</table>
<!-- Pagination -->
<div class="p-4 flex items-center justify-between">
<p class="text-sm text-gray-600 dark:text-gray-400">Showing 1-5 of 30</p>
<div class="flex items-center gap-1">
<!-- Previous (disabled) -->
<a
href="#previous"
class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded text-gray-400 cursor-not-allowed pointer-events-none"
aria-disabled="true"
>
Previous
</a>
<!-- Active page -->
<a
href="#1"
aria-current="page"
class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded bg-blue-400 text-white dark:bg-gray-700"
>
1
</a>
<!-- Page numbers -->
<a
href="#2"
class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
>
2
</a>
<a
href="#3"
class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
>
3
</a>
<span class="px-2 text-sm text-gray-500">...</span>
<a
href="#6"
class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
>
6
</a>
<!-- Next -->
<a
href="#next"
class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded hover:bg-blue-200 dark:hover:bg-gray-700"
>
Next
</a>
</div>
</div>
</div>
</div>