Static DataTable
Tailwind CSS DataTable example that loads data from a local HTML table element and enables pagination and sorting features for the dataset
Static DataTable
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Static DataTable
</h3>
<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Push Alerts
</span>
</label>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="datatable_1">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-[100px] text-center">
<span class="sort asc">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Last Session
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]">
<span class="sort">
<span class="sort-label">
Label
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]">
<span class="sort">
<span class="sort-label">
<span class="pt-px" data-tooltip="true" data-tooltip-offset="0, 5px" data-tooltip-placement="top">
<i class="ki-outline ki-information-2 text-lg leading-none">
</i>
<span class="tooltip max-w-48" data-tooltip-content="true">
Merchant account providers
</span>
</span>
Method
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[60px]">
</th>
<th class="w-[60px]">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
6 Aug, 2024
</td>
<td>
HR Dept
</td>
<td>
Basic auth
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
22 Jul 2024
</td>
<td>
Guy Hawkins
</td>
<td>
Web
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-danger">
</span>
</td>
<td>
18 Jul, 2024
</td>
<td>
Sales Dept
</td>
<td>
SSH
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
15 Jul, 2024
</td>
<td>
Sales Dept
</td>
<td>
Kerberos
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
Token
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
28 Jul, 2024
</td>
<td>
Finance Dept
</td>
<td>
API Key
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
16 Jul, 2024
</td>
<td>
Design Dept
</td>
<td>
FIDO U2F
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-danger">
</span>
</td>
<td>
11 Aug, 2024
</td>
<td>
Compliance Dept
</td>
<td>
OpenID
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
19 Jul, 2024
</td>
<td>
Alice Smith
</td>
<td>
Biometric
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
6 Aug, 2024
</td>
<td>
HR Dept
</td>
<td>
Basic auth
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
22 Jul 2024
</td>
<td>
Guy Hawkins
</td>
<td>
Web
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-danger">
</span>
</td>
<td>
18 Jul, 2024
</td>
<td>
Sales Dept
</td>
<td>
SSH
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-success">
</span>
</td>
<td>
15 Jul, 2024
</td>
<td>
Sales Dept
</td>
<td>
Kerberos
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-dot size-2 bg-warning">
</span>
</td>
<td>
30 Jul, 2024
</td>
<td>
Legal Dept
</td>
<td>
Token
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-notepad-edit">
</i>
</a>
</td>
<td>
<a class="btn btn-sm btn-icon btn-clear btn-light" href="#">
<i class="ki-outline ki-trash">
</i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Remote Data Source
Tailwind CSS DataTable example that loads data from a remote API endpoint and enables server-side pagination and sorting features for the dataset.
Remote Data Source
Status | IP Address | Last Session | Label | Verify the identity of a user trying to access a resource Method |
---|
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Remote Data Source
</h3>
<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Push Alerts
</span>
</label>
</div>
<div class="card-body">
<div id="kt_remote_table">
<div class="scrollable-x-auto">
<table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
<thead>
<tr>
<th class="w-[100px] text-center" data-datatable-column="status">
<span class="sort">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[250px]" data-datatable-column="ipAddress">
<span class="sort">
<span class="sort-label">
IP Address
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]" data-datatable-column="lastSession">
<span class="sort">
<span class="sort-label">
Last Session
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]" data-datatable-column="label">
<span class="sort">
<span class="sort-label">
Label
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]" data-datatable-column="method">
<span class="sort">
<span class="sort-label">
<span class="pt-px" data-tooltip="true" data-tooltip-offset="0, 5" data-tooltip-placement="left">
<i class="ki-outline ki-information-2 text-lg leading-none">
</i>
<span class="tooltip max-w-48">
Verify the identity of a user trying to access a resource
</span>
</span>
Method
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
const apiUrl = 'https://yourapirul';
const element = document.querySelector('#kt_remote_table');
const dataTableOptions = {
apiEndpoint: apiUrl,
pageSize: 5,
columns: {
status: {
title: 'Status',
render: (item) => {
return `
<span class="badge badge-dot size-2 ${item}">
</span>
`;
},
createdCell(cell) {
cell.classList.add('text-center');
},
},
ipAddress: {
title: 'IP Address',
},
lastSession: {
title: 'Last Session',
},
label: {
title: 'Label',
},
method: {
title: 'Method',
},
},
};
const dataTable = new KTDataTable(element, dataTableOptions);
{
"page": 1,
"pageCount": 3,
"sortField": null,
"sortOrder": null,
"totalCount": 30,
"data": [
{
"id": 1,
"ipAddress": "192.168.1.1",
"label": "HR Dept",
"lastSession": "6 Aug, 2024",
"method": "Basic auth",
"status": "bg-success"
},
{
"id": 2,
"ipAddress": "2001:db8:0:1234:0:567:8:5",
"label": "Guy Hawkins",
"lastSession": "22 Jul 2024",
"method": "Web",
"status": "bg-success"
},
{
"id": 3,
"ipAddress": "2001:db8:0:1234:0:567:8:4",
"label": "Sales Dept",
"lastSession": "18 Jul, 2024",
"method": "SSH",
"status": "bg-danger"
},
{
"id": 4,
"ipAddress": "192.168.1.2",
"label": "Sales Dept",
"lastSession": "15 Jul, 2024",
"method": "Kerberos",
"status": "bg-success"
},
{
"id": 5,
"ipAddress": "2001:db8:0:1234:0:567:8:3",
"label": "Legal Dept",
"lastSession": "30 Jul, 2024",
"method": "Token",
"status": "bg-warning"
},
{
"id": 6,
"ipAddress": "10.0.0.2",
"label": "Finance Dept",
"lastSession": "28 Jul, 2024",
"method": "API Key",
"status": "bg-warning"
},
{
"id": 7,
"ipAddress": "192.168.1.4",
"label": "Design Dept",
"lastSession": "16 Jul, 2024",
"method": "FIDO U2F",
"status": "bg-success"
},
{
"id": 8,
"ipAddress": "2001:db8:0:1234:0:567:8:6",
"label": "Compliance Dept",
"lastSession": "11 Aug, 2024",
"method": "OpenID",
"status": "bg-danger"
},
{
"id": 9,
"ipAddress": "2001:db8:0:1234:0:567:8:9",
"label": "Alice Smith",
"lastSession": "19 Jul, 2024",
"method": "Biometric",
"status": "bg-success"
},
{
"id": 10,
"ipAddress": "192.168.1.1",
"label": "HR Dept",
"lastSession": "6 Aug, 2024",
"method": "Basic auth",
"status": "bg-success"
}
]
}
Group Check
Tailwind CSS DataTable example that enables group check features to easily select multiple table rows through a single checkbox.
Group Check
Status | IP Address | Last Session | Label | Merchant account providers Method |
---|
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Group Check
</h3>
<label class="switch switch-sm">
<input checked="" class="order-2" name="check" type="checkbox" value="1"/>
<span class="switch-label order-1">
Push Alerts
</span>
</label>
</div>
<div class="card-body">
<div id="kt_remote_group_check_table">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="w-[100px] text-center" data-datatable-column="status">
<span class="sort">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[250px]" data-datatable-column="ipAddress">
<span class="sort">
<span class="sort-label">
IP Address
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]" data-datatable-column="lastSession">
<span class="sort">
<span class="sort-label">
Last Session
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]" data-datatable-column="label">
<span class="sort">
<span class="sort-label">
Label
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[185px]" data-datatable-column="method">
<span class="sort">
<span class="sort-label">
<span class="pt-px" data-tooltip="true" data-tooltip-offset="0, 5" data-tooltip-placement="left">
<i class="ki-outline ki-information-2 text-lg leading-none">
</i>
<span class="tooltip max-w-48">
Merchant account providers
</span>
</span>
Method
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
const apiUrl = 'https://yourapirul';
const element = document.querySelector('#kt_remote_group_check_table');
const dataTableOptions = {
apiEndpoint: apiUrl,
pageSize: 5,
columns: {
select: {
render: (item, data, context) => {
const checkbox = document.createElement('input');
checkbox.className = 'checkbox checkbox-sm';
checkbox.type = 'checkbox';
checkbox.value = data.id.toString();
checkbox.setAttribute('data-datatable-row-check', 'true');
return checkbox.outerHTML.trim();
},
},
status: {
title: 'Status',
render: (item) => {
return `
<span class="badge badge-dot size-2 ${item}">
</span>
`;
},
createdCell(cell) {
cell.classList.add('text-center');
},
},
ipAddress: {
title: 'IP Address',
},
lastSession: {
title: 'Last Session',
},
label: {
title: 'Label',
},
method: {
title: 'Method',
},
},
};
const dataTable = new KTDataTable(element, dataTableOptions);
{
"page": 1,
"pageCount": 3,
"sortField": null,
"sortOrder": null,
"totalCount": 30,
"data": [
{
"id": 1,
"ipAddress": "192.168.1.1",
"label": "HR Dept",
"lastSession": "6 Aug, 2024",
"method": "Basic auth",
"status": "bg-success"
},
{
"id": 2,
"ipAddress": "2001:db8:0:1234:0:567:8:5",
"label": "Guy Hawkins",
"lastSession": "22 Jul 2024",
"method": "Web",
"status": "bg-success"
},
{
"id": 3,
"ipAddress": "2001:db8:0:1234:0:567:8:4",
"label": "Sales Dept",
"lastSession": "18 Jul, 2024",
"method": "SSH",
"status": "bg-danger"
},
{
"id": 4,
"ipAddress": "192.168.1.2",
"label": "Sales Dept",
"lastSession": "15 Jul, 2024",
"method": "Kerberos",
"status": "bg-success"
},
{
"id": 5,
"ipAddress": "2001:db8:0:1234:0:567:8:3",
"label": "Legal Dept",
"lastSession": "30 Jul, 2024",
"method": "Token",
"status": "bg-warning"
},
{
"id": 6,
"ipAddress": "10.0.0.2",
"label": "Finance Dept",
"lastSession": "28 Jul, 2024",
"method": "API Key",
"status": "bg-warning"
},
{
"id": 7,
"ipAddress": "192.168.1.4",
"label": "Design Dept",
"lastSession": "16 Jul, 2024",
"method": "FIDO U2F",
"status": "bg-success"
},
{
"id": 8,
"ipAddress": "2001:db8:0:1234:0:567:8:6",
"label": "Compliance Dept",
"lastSession": "11 Aug, 2024",
"method": "OpenID",
"status": "bg-danger"
},
{
"id": 9,
"ipAddress": "2001:db8:0:1234:0:567:8:9",
"label": "Alice Smith",
"lastSession": "19 Jul, 2024",
"method": "Biometric",
"status": "bg-success"
},
{
"id": 10,
"ipAddress": "192.168.1.1",
"label": "HR Dept",
"lastSession": "6 Aug, 2024",
"method": "Basic auth",
"status": "bg-success"
}
]
}
Source Code
The following source file manages the JavaScript behavior of the Tailwind CSS DataTable component.
Upon building the assets using
Webpack Build Tools
,
the below file is compiled and added into the
dist/assets/js/core.bundle.js
bundle,
making it available globally across all pages.
File | Description |
---|---|
src/core/components/datatable/datatable.ts
|
The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS DataTable component. |
HTML Markup
The following markup outlines the core structure of the Tailwind CSS DataTable component.
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
DataTable Example
</h3>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="my_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="text-center">
<span class="sort">
<span class="sort-label">
Column 1
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Column 2
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Attributes
The following HTML attributes are utilized by Tailwind CSS DataTable component to control its JavaScript behavior.
HTML Attribute | Description |
---|---|
data-datatable-table="true"
|
Identifies the main table element for the DataTable. |
data-datatable-check="true"
|
Identifies the checkbox control used to select multiple rows within the DataTable. |
data-datatable-row-check="true"
|
Identifies the individual checkbox control for each row in the DataTable. |
data-datatable-info="true"
|
Identifies the element that displays the current page number and total pages of the DataTable. |
data-datatable-size="true"
|
Marks the select control that allows users to change the number of records displayed per page. |
data-datatable-pagination="true"
|
Identifies the pagination element that enables users to navigate through different pages of the DataTable. |
Classes
This table outlines the custom CSS classes utilized for styling the default components of the Tailwind CSS DataTable.
Class | Description |
---|---|
table
|
Base class for the DataTable element. It wraps the entire table content and provides basic styling and behavior. |
table-border
|
Adds border styling to the DataTable for visual separation and emphasis. |
table-fixed
|
Applies fixed layout styling to the DataTable, ensuring consistent column widths. |
sort
|
Enables sorting functionality for the DataTable columns. |
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. |
sort-label
|
Applied to the label element within the sortable column to indicate sorting. |
sort-icon
|
Applied to the icon element within the sortable column to visually represent sorting direction. |
Variants
Utilize the following Tailwind CSS DataTable variants to manage the appearance of the menu items and their child elements.
For more information, refer to the
Tailwind CSS Variant documentation
.
Class | Description |
---|---|
datatable-loading
|
Applies specific styles when the DataTable is loading, triggered by actions such as pagination, page size change, or sorting. |
datatable-initialized
|
Applies specific styles when the DataTable has fully initialized and is ready for user interaction. |
datatable-sort
|
Applies specific styles when a column in the DataTable is sorted in ascending or descending order. |
datatable-sort-asc
|
Applies specific styles when a column in the DataTable is sorted in ascending order. |
datatable-sort-desc
|
Applies specific styles when a column in the DataTable is sorted in descending order. |
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Variants Example
</h3>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="my_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border datatable-loading:bg-gray-200 datatable-initialized:bg-gray-100" data-datatable-table="true">
<thead>
<tr>
<th>
<span class="sort">
<span class="sort-label datatable-sort:text-danger">
Column 1
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th>
<span class="sort">
<span class="sort-label datatable-sort-asc:text-success">
Column 2
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th>
<span class="sort">
<span class="sort-label datatable-sort-desc:text-primary">
Column 3
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
Data Attribute Initialization
Auto-initialize all KTDataTable instances on page load by adding the
data-datatable="true"
attribute to your datatable elements. This triggers on the fly initialization by the KTDataTable JavaScript component.
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
DataTable Example
</h3>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="my_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="text-center">
<span class="sort">
<span class="sort-label">
Column 1
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Column 2
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
These attributes allow you to set options for the KTDataTable component during initialization.
The values you provide as strings are automatically converted to the appropriate
KTDataTable Options
.
HTML Attribute | Type | Default |
---|---|---|
data-datatable
|
boolean
|
true
|
data-datatable-state-save
|
boolean
|
true
|
data-datatable-page-size
|
number
|
10
|
JavaScript Initialization
To initialize a new datatable component, pass the corresponding DOM element and configuration options to the KTDataTable class constructor.
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
DataTable Example
</h3>
</div>
<div class="card-body">
<div data-datatable="false" id="my_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="text-center">
<span class="sort">
<span class="sort-label">
Column 1
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Column 2
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To initialize the datatable via JavaScript, use
data-datatable="false"
attribute instead.
This prevents automatic initialization on page load.
Options
This table outlines the configuration options for initialization of Tailwind CSS DataTable instances,
using the KTDataTable JavaScript component.
Property | Type | Default | Description |
---|---|---|---|
requestMethod
|
enum
"GET" | "POST"
|
"POST"
|
Defines the HTTP request method to be used for data fetching. |
requestHeaders
|
object
|
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
|
string
|
"No records found"
|
Message displayed when no records are found in the DataTable. |
pageSizes
|
array
|
[5, 10, 20, 30, 50]
|
Defines the available page size options for the DataTable. |
pageSize
|
number
|
10
|
Sets the default number of records displayed per page. |
pageMore
|
boolean
|
true
|
Displays a more pages
...
indicator if the number of pages exceeds the
pageMoreLimit
value.
|
pageMoreLimit
|
number
|
3
|
Sets the threshold for displaying the "more pages" indicator. |
pagination
|
object
|
Pagination options for controlling the DataTable navigation. | |
sort
|
object
|
Sorting options for configuring how DataTable columns are sorted. | |
search
|
object
|
Searching options for configuring how DataTable columns are filtered when searching. | |
loading
|
object
|
Loading options to manage the DataTable loading state. | |
attributes
|
object
|
Specifies the selectors for the elements to be targeted. | |
stateSave
|
boolean
|
true
|
Enables saving the state of the DataTable (e.g., pagination, sorting) for persistence across page reloads. |
Utilities
Manage and interact with KTDataTable instances using these static methods of
KTDataTable
class.
Method | Description |
---|---|
init()
|
Automatically initializes KTDataTable object for all elements with the
data-datatable="true"
attribute on page load.
|
createInstances()
|
Allows to create 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
.
|
getOrCreateInstance(element)
|
Returns the existing
KTDataTable
object for the provided DOM element
element
, or creates a new instance if none exists, then returns the same.
|
// Initialize all datatables
KTDataTable.init()
// Initialzie pending datatables
KTDataTable.createInstances();
// Get datatable object
const datatableEl = document.querySelector('#my_datatable');
const datatable = KTDataTable.getInstance(datatableEl);
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
DataTable Example
</h3>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="my_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="text-center">
<span class="sort">
<span class="sort-label">
Column 1
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Column 2
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Methods
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. 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. |
getOption(name)
|
Retrieves the value of a configuration option by
name
parameter from a KTDataTable instance.
|
getElement()
|
Retrieves the DOM element linked to a specific KTDataTable instance. |
on(eventName, handler)
|
Allows attaching event listeners to the KTDataTable custom events using the
eventName
and
eventId
string parameters. These events enable programmatic interaction based on user actions or
internal state changes of KTDataTable. The function returns
string
as a unique identifier for the registered listener, allowing you to remove it later if needed.
|
off(eventName, eventId)
|
Removes an event listener for the
eventName
and
eventId
parameters attached with the
on
method.
|
dispose()
|
Removes the KTDataTable instance from an element, including any associated data stored on the DOM element. |
isChecked()
|
Returns
true
if the checkbox is checked, otherwise
false
.
|
toggle()
|
Toggles the checkbox state between checked and unchecked. |
check()
|
Checks the row checkbox. |
uncheck()
|
Unchecks the row checkbox. |
getChecked()
|
Returns an array of the checked row data. This method returns an array of objects representing the selected rows in the DataTable. |
const datatableEl = document.querySelector('#my_datatable');
const options = {
pageSize: 5,
stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);
datatable.reload();
datatable.showSpinner();
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
DataTable Example
</h3>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5" data-datatable-state-save="true" id="my_datatable">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true">
<thead>
<tr>
<th class="w-14">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="text-center">
<span class="sort">
<span class="sort-label">
Column 1
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[185px]">
<span class="sort">
<span class="sort-label">
Column 2
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Events
KTDataTable
custom events allows you to register callback functions(event listeners)
that will be invoked automatically whenever specific custom events are triggered within the component.
Event | Description |
---|---|
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. |
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');
});