Preview Purchase
Base Components

Tailwind CSS DataTable

Tailwind CSS 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.

Static DataTable

Tailwind CSS DataTable example that loads data from a local HTML table element and enables pagination and sorting features for the dataset
Preview HTML

Static DataTable

Status Last Session Label Merchant account providers Method
6 Aug, 2024 HR Dept Basic auth
22 Jul 2024 Guy Hawkins Web
18 Jul, 2024 Sales Dept SSH
15 Jul, 2024 Sales Dept Kerberos
30 Jul, 2024 Legal Dept Token
28 Jul, 2024 Finance Dept API Key
16 Jul, 2024 Design Dept FIDO U2F
11 Aug, 2024 Compliance Dept OpenID
19 Jul, 2024 Alice Smith Biometric
6 Aug, 2024 HR Dept Basic auth
22 Jul 2024 Guy Hawkins Web
18 Jul, 2024 Sales Dept SSH
15 Jul, 2024 Sales Dept Kerberos
30 Jul, 2024 Legal Dept Token
Show per page

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.
Preview HTML JavaScript JSON

Remote Data Source

Status IP Address Last Session Label Verify the identity of a user trying to access a resource Method
Show per page

Group Check

Tailwind CSS DataTable example that enables group check features to easily select multiple table rows through a single checkbox.
Preview HTML JavaScript JSON

Group Check

Status IP Address Last Session Label Merchant account providers Method
Show per page

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.
JavaScript HTML 
				
					const datatableEl = document.querySelector('#my_datatable');
const options = {
	pageSize: 5,
	stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);

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.
JavaScript HTML 
				
					// Initialize all datatables
KTDataTable.init()

// Initialzie pending datatables
KTDataTable.createInstances();

// Get datatable object
const datatableEl = document.querySelector('#my_datatable');
const datatable = KTDataTable.getInstance(datatableEl);

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.
JavaScript HTML 
				
					const datatableEl = document.querySelector('#my_datatable');
const options = {
	pageSize: 5,
	stateSave: true
};
const datatable = new KTDataTable(datatableEl, options);

datatable.reload();
datatable.showSpinner();

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');
});
Previous Container Next Dismiss