Tailwind DataTable component simplifies the creation of interactive data tables for web applications. With features like sorting, pagination, and customizable layouts, for managing and displaying large datasets from static table or remote API endpoints.
Tailwind DataTable example that loads data from a local HTML table element and enables pagination and sorting features for the dataset
<div class="grid w-full space-y-5">
<div class="kt-card">
<div class="kt-card-header min-h-16">
<input
type="text"
placeholder="Search..."
class="kt-input sm:w-48"
/><button type="button" class="kt-btn kt-btn-outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-plus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg
>Add
</button>
</div>
<div
class="kt-card-table"
data-kt-datatable="true"
data-kt-datatable-page-size="5"
data-kt-datatable-state-save="true"
>
<div class="kt-table-wrapper kt-scrollable">
<table class="kt-table" data-kt-datatable-table="true">
<thead>
<tr>
<th scope="col" class="w-30" data-kt-datatable-column="label">
<span class="kt-table-col"
><span class="kt-table-col-label">Label</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="method">
<span class="kt-table-col"
><span class="kt-table-col-label">Method</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-24" data-kt-datatable-column="status">
<span class="kt-table-col"
><span class="kt-table-col-label">Status</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th
scope="col"
class="w-24"
data-kt-datatable-column="lastSession"
>
<span class="kt-table-col"
><span class="kt-table-col-label">Last Session</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th
scope="col"
class="w-16"
data-kt-datatable-column="actions"
></th>
</tr>
</thead>
<tbody>
<tr>
<td>Guy Hawkins</td>
<td>Web</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>22 Jul 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Sales Dept</td>
<td>SSH</td>
<td>
<span class="kt-badge kt-badge-destructive">Rejected</span>
</td>
<td>18 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Sales Dept</td>
<td>Kerberos</td>
<td><span class="kt-badge kt-badge-primary">Verified</span></td>
<td>15 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Legal Dept</td>
<td>Token</td>
<td><span class="kt-badge kt-badge-warning">Pending</span></td>
<td>30 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Finance Dept</td>
<td>API Key</td>
<td><span class="kt-badge kt-badge-warning">Pending</span></td>
<td>28 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Design Dept</td>
<td>FIDO U2F</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>16 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Compliance Dept</td>
<td>OpenID</td>
<td>
<span class="kt-badge kt-badge-destructive">Rejected</span>
</td>
<td>11 Aug, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Alice Smith</td>
<td>Biometric</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>19 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>HR Dept</td>
<td>Basic auth</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>6 Aug, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Guy Hawkins</td>
<td>Web</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>22 Jul 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Sales Dept</td>
<td>SSH</td>
<td>
<span class="kt-badge kt-badge-destructive">Rejected</span>
</td>
<td>18 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Sales Dept</td>
<td>Kerberos</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>15 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>Legal Dept</td>
<td>Token</td>
<td><span class="kt-badge kt-badge-warning">Pending</span></td>
<td>30 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
</tbody>
</table>
</div>
<!--begin:pagination-->
<div class="kt-datatable-toolbar">
<div class="kt-datatable-length">
Show<select
class="kt-select kt-select-sm w-16"
name="perpage"
data-kt-datatable-size="true"
></select
>per page
</div>
<div class="kt-datatable-info">
<span data-kt-datatable-info="true"></span>
<div
class="kt-datatable-pagination"
data-kt-datatable-pagination="true"
></div>
</div>
</div>
<!--end:pagination-->
</div>
</div>
</div>
Tailwind DataTable example that loads data from a remote API endpoint and enables server-side pagination and sorting features for the dataset.
<div class="grid w-full space-y-5">
<div class="kt-card">
<div class="kt-card-header min-h-16">
<input
type="text"
placeholder="Search..."
class="kt-input sm:w-48"
data-kt-datatable-search="true"
/>
</div>
<div
id="kt_datatable_remote_source"
class="kt-card-table"
data-kt-datatable-page-size="5"
data-kt-datatable-state-save="true"
>
<div class="kt-table-wrapper kt-scrollable">
<table class="kt-table" data-kt-datatable-table="true">
<thead>
<tr>
<th scope="col" class="w-30" data-kt-datatable-column="label">
<span class="kt-table-col"
><span class="kt-table-col-label">Label</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="method">
<span class="kt-table-col"
><span class="kt-table-col-label">Method</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-24" data-kt-datatable-column="status">
<span class="kt-table-col"
><span class="kt-table-col-label">Status</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th
scope="col"
class="w-24"
data-kt-datatable-column="lastSession"
>
<span class="kt-table-col"
><span class="kt-table-col-label">Last Session</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-24" data-kt-datatable-column="ipAddress">
<span class="kt-table-col"
><span class="kt-table-col-label">IP Address</span
><span class="kt-table-col-sort"></span
></span>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!--begin:pagination-->
<div class="kt-datatable-toolbar">
<div class="kt-datatable-length">
Show<select
class="kt-select kt-select-sm w-16"
name="perpage"
data-kt-datatable-size="true"
></select
>per page
</div>
<div class="kt-datatable-info">
<span data-kt-datatable-info="true"></span>
<div
class="kt-datatable-pagination"
data-kt-datatable-pagination="true"
></div>
</div>
</div>
<!--end:pagination-->
</div>
</div>
</div>
Tailwind DataTable example that enables group check features to easily select multiple table rows through a single checkbox.
<div class="grid w-full space-y-5">
<div class="kt-card">
<div class="kt-card-header min-h-16">
<input
type="text"
placeholder="Search..."
class="kt-input sm:w-48"
/><button type="button" class="kt-btn kt-btn-outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-plus"
aria-hidden="true"
>
<path d="M5 12h14"></path>
<path d="M12 5v14"></path></svg
>Add
</button>
</div>
<div
class="kt-card-table"
data-kt-datatable="true"
data-kt-datatable-page-size="5"
data-kt-datatable-state-save="true"
>
<div class="kt-table-wrapper kt-scrollable">
<table class="kt-table" data-kt-datatable-table="true">
<thead>
<tr>
<th scope="col" class="w-10">
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-check="true"
/>
</div>
</th>
<th scope="col" class="w-30" data-kt-datatable-column="label">
<span class="kt-table-col"
><span class="kt-table-col-label">Label</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-20" data-kt-datatable-column="method">
<span class="kt-table-col"
><span class="kt-table-col-label">Method</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th scope="col" class="w-24" data-kt-datatable-column="status">
<span class="kt-table-col asc"
><span class="kt-table-col-label">Status</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th
scope="col"
class="w-24"
data-kt-datatable-column="lastSession"
>
<span class="kt-table-col"
><span class="kt-table-col-label">Last Session</span
><span class="kt-table-col-sort"></span
></span>
</th>
<th
scope="col"
class="w-16"
data-kt-datatable-column="actions"
></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="0"
/>
</div>
</td>
<td>Guy Hawkins</td>
<td>Web</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>22 Jul 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="1"
/>
</div>
</td>
<td>Sales Dept</td>
<td>SSH</td>
<td>
<span class="kt-badge kt-badge-destructive">Rejected</span>
</td>
<td>18 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="2"
/>
</div>
</td>
<td>Sales Dept</td>
<td>Kerberos</td>
<td><span class="kt-badge kt-badge-primary">Verified</span></td>
<td>15 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="3"
/>
</div>
</td>
<td>Legal Dept</td>
<td>Token</td>
<td><span class="kt-badge kt-badge-warning">Pending</span></td>
<td>30 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="4"
/>
</div>
</td>
<td>Finance Dept</td>
<td>API Key</td>
<td><span class="kt-badge kt-badge-warning">Pending</span></td>
<td>28 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="5"
/>
</div>
</td>
<td>Design Dept</td>
<td>FIDO U2F</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>16 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="6"
/>
</div>
</td>
<td>Compliance Dept</td>
<td>OpenID</td>
<td>
<span class="kt-badge kt-badge-destructive">Rejected</span>
</td>
<td>11 Aug, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="7"
/>
</div>
</td>
<td>Alice Smith</td>
<td>Biometric</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>19 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="8"
/>
</div>
</td>
<td>HR Dept</td>
<td>Basic auth</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>6 Aug, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="9"
/>
</div>
</td>
<td>Guy Hawkins</td>
<td>Web</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>22 Jul 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="10"
/>
</div>
</td>
<td>Sales Dept</td>
<td>SSH</td>
<td>
<span class="kt-badge kt-badge-destructive">Rejected</span>
</td>
<td>18 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="11"
/>
</div>
</td>
<td>Sales Dept</td>
<td>Kerberos</td>
<td><span class="kt-badge kt-badge-success">Approved</span></td>
<td>15 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
<tr>
<td>
<div class="kt-checkbox-wrapper">
<input
type="checkbox"
class="kt-checkbox"
data-kt-datatable-row-check="true"
value="12"
/>
</div>
</td>
<td>Legal Dept</td>
<td>Token</td>
<td><span class="kt-badge kt-badge-warning">Pending</span></td>
<td>30 Jul, 2024</td>
<td class="text-end">
<span class="inline-flex gap-2.5"
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pencil"
aria-hidden="true"
>
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg></a
><a
href="#"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash"
aria-hidden="true"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path
d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
></path></svg></a
></span>
</td>
</tr>
</tbody>
</table>
</div>
<!--begin:pagination-->
<div class="kt-datatable-toolbar">
<div class="kt-datatable-length">
Show<select
class="kt-select kt-select-sm w-16"
name="perpage"
data-kt-datatable-size="true"
></select
>per page
</div>
<div class="kt-datatable-info">
<span data-kt-datatable-info="true"></span>
<div
class="kt-datatable-pagination"
data-kt-datatable-pagination="true"
></div>
</div>
</div>
<!--end:pagination-->
</div>
</div>
</div>
These options allow you to set options for the datatable component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
| Data Options | |||
data-kt-datatable-state-save | Saves the state of the DataTable (e.g., pagination, sorting) so it can be restored when the user returns to the page. | ||
data-kt-datatable-page-size | Sets the number of records to display per page in the DataTable. This value can be customized as needed. | ||
| JavaScript Options | |||
requestMethod | Defines the HTTP request method to be used for data fetching. | ||
requestHeaders | object | {"Content-Type": "application/x-www-form-urlencoded"} | Specifies the headers to be sent with the request. For more info, check JavaScript Request Headers . |
info | string | "{start}-{end} of {total}" | Template for displaying the current page information in the DataTable. |
infoEmpty | Message displayed when no records are found in the DataTable. | ||
pageSizes | Defines the available page size options for the DataTable. | ||
pageSize | Sets the default number of records displayed per page. | ||
pageMore | Displays a more pages ... indicator if the number of pages exceeds the pageMoreLimit value. | ||
pageMoreLimit | Sets the threshold for displaying the "more pages" indicator. | ||
pagination | Pagination options for controlling the DataTable navigation. | ||
sort | Sorting options for configuring how DataTable columns are sorted. | ||
search | Searching options for configuring how DataTable columns are filtered when searching. | ||
loading | Loading options to manage the DataTable loading state. | ||
attributes | Specifies the selectors for the elements to be targeted. | ||
stateSave | Enables saving the state of the DataTable (e.g., pagination, sorting) for persistence across page reloads. | ||
columns | Optional. Defines custom column rendering and cell creation logic. |
This table details the custom classes and data attributes used by the DataTable component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-datatable | Used to auto-initialize KTDataTable instances on page load. Alternatively, you can remove it and perform initialization using JavaScript. |
data-kt-datatable-table | Identifies the main table element for the DataTable. |
data-kt-datatable-column | Used on <th> elements to identify columns. |
data-kt-datatable-column-sort | Used on <th> elements to enable sorting for that column. |
data-kt-datatable-check | Identifies the group checkbox control used to select multiple rows. |
data-kt-datatable-row-check | Identifies the individual checkbox control for each row. |
data-kt-datatable-info | Identifies the element that displays the current page number and total pages. |
data-kt-datatable-size | Marks the select control that allows users to change the number of records displayed per page. |
data-kt-datatable-pagination | Identifies the pagination element that enables users to navigate through different pages. |
| Classes | |
kt-table | Base class for the DataTable element. It wraps the entire table content and provides basic styling and behavior. |
kt-table-grid | Adds border styling to the DataTable for visual separation and emphasis. |
kt-table-sort | Enables sorting functionality for the DataTable columns. |
kt-table-sort-label | Applied to the label element within the sortable column to indicate sorting. |
kt-table-sort-icon | Applied to the icon element within the sortable column to visually represent sorting direction. |
asc | Indicates that a column in the DataTable is sorted in ascending order. |
desc | Indicates that a column in the DataTable is sorted in descending order. |
Custom modifiers to control the DataTable's style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-datatable-loading | Applies specific styles when the DataTable is loading, triggered by actions such as pagination, page size change, or sorting. |
kt-datatable-initialized | Applies specific styles when the DataTable has fully initialized and is ready for user interaction. |
kt-datatable-sort-asc | Applies specific styles when a column in the DataTable is sorted in ascending order. |
kt-datatable-sort-desc | Applies specific styles when a column in the DataTable is sorted in descending order. |
Use KTDataTable component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTDataTable(element, options) | Creates an instance of the KTDataTable class for the given DOM element and configuration options. This initializes the DataTable with the specified settings and binds it to the provided HTML element. |
sort(field: string | number) | Sorts the DataTable based on the specified field, which can be a column name string or column index number. This method reorders the rows according to the sort criteria applied to the field. |
search(query: string | object) | Searches the DataTable for rows that match the specified text string or object. This method filters the rows to display only those that contain the search query. |
goPage(page: number) | Navigates to the specified page number in the DataTable. This method updates the displayed rows to correspond with the chosen page. |
reload() | Reloads the DataTable data. This method refreshes the DataTable, fetching the latest data and updating the display accordingly. |
setPageSize(pageSize: number) | Sets the number of records to display per page in the DataTable. This method adjusts the pagination settings to accommodate the specified page size. |
showSpinner() | Displays a loading spinner overlay on the DataTable. This method is useful for indicating that data is being loaded or processed. |
hideSpinner() | Hides the loading spinner overlay from the DataTable. This method is used to indicate that data loading or processing is complete. |
dispose() | Removes the KTDataTable instance from an element, including any associated data stored on the DOM element. |
isChecked() | Returns true if the group checkbox is checked, otherwise false. |
toggle() | Toggles the group checkbox state between checked and unchecked. |
check() | Checks all visible row checkboxes. |
uncheck() | Unchecks all visible row checkboxes. |
getChecked() | Returns an array of the checked row IDs. |
update() | Reapplies checked state to visible checkboxes (after redraw/pagination). |
getState() | Returns the current state object of the DataTable. |
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
datatable.reload();
datatable.showSpinner();To initialize Tailwind DataTable with JavaScript, use data-kt-datatable="false" attribute instead. This prevents automatic initialization on page load.
Manage and interact with KTDataTable instances using these static methods of the KTDataTable JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTDataTable objects for all elements with the data-kt-datatable="true" attribute on page load. |
createInstances() | Creates KTDataTable instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the KTDataTable object associated with the given DOM element element. |
// Initialize all datatables
KTDataTable.init();
// Initialize pending datatables
KTDataTable.createInstances();
// Get datatable object
const datatableEl = document.querySelector('#my_datatable');
const datatable = KTDataTable.getInstance(datatableEl);KTDataTable custom events allow you to register callback functions (event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
init | Triggered immediately after the DataTable is initialized. |
draw | Triggered immediately before the DataTable is drawn and displayed. |
drew | Triggered immediately after the DataTable is drawn and displayed. |
redraw | Triggered immediately after the DataTable is redrawn, typically after updates or changes. |
fetch | Triggered immediately before data is fetched for the DataTable. |
fetched | Triggered immediately after data has been fetched for the DataTable. |
sort | Triggered immediately after the DataTable is sorted. |
checked | Triggered immediately after rows checkbox is checked. |
unchecked | Triggered immediately after rows checkbox is unchecked. |
reload | Triggered immediately after the DataTable is reloaded. |
pagination | Triggered immediately before the DataTable pagination is updated. |
stateSave | Triggered immediately before the DataTable state is saved. |
error | Triggered if there is an error during data fetching or processing. |
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
datatable.on('init', () => {
console.log('init event');
});
datatable.on('draw', () => {
console.log('draw event');
});