Third-party plugins
Datatables
Upgrade your HTML tables with Tailwind CSS Datatables for improved search, pagination, and sorting, enhancing data navigation and management.
Getting started
Setup
Info: Please note that Datatables may not be the ideal library for modern JavaScript frameworks. If you're looking to integrate with React, Vue, Angular, or similar frameworks, you might want to consider alternative libraries such as <a class="link link-primary" target="_blank" href="https://tanstack.com/table/latest">TanStack Tables</a>
<script src="../path/to/vendor/jquery/dist/jquery.min.js"></script>
<script src="../path/to/vendor/datatables.net/js/dataTables.min.js"></script>DataTable Structure
Basic outline
Prefer to create your own style? Here is a completely unstylized example.
| Name | Age | Address | Action |
|---|---|---|---|
| John Brown | 45 | New York No. 1 Lake Park |
Basic usage
Example
This example shows a simple table with pagination. The `data-datatable` attribute is used to set options like the number of rows per page and custom styles for pagination buttons. It uses Tailwind CSS for styling the table and action buttons.
|
Name
|
Email
|
Status
|
Date
|
Actions |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 | |
| Alice Johnson | alicej@example.com | Current | January 15, 2024 | |
| Chris Evans | chrisev@example.com | Inactive | November 20, 2023 | |
| Dana White | danaw@example.com | Current | February 2, 2024 | |
| Ethan Hall | ethanh@example.com | Pending | April 14, 2024 | |
| Fiona Carter | fionac@example.com | Current | March 9, 2024 | |
| George Smith | georges@example.com | Inactive | December 12, 2023 | |
| Hannah Wright | hannahw@example.com | Pending | June 10, 2024 | |
| Isaac Long | isaacl@example.com | Current | August 20, 2024 | |
| Jane Davis | janed@example.com | Current | July 3, 2024 | |
| Kevin Lee | kevinl@example.com | Current | May 12, 2024 | |
| Linda Green | lindag@example.com | Inactive | October 7, 2023 |
Showing
to
of
users
Illustrations
Scrollable table body (tbody)
Tbody makes a scroll.
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|
| Apple iPhone 15 | $999 | In Stock | |
| Samsung Galaxy S23 | $899 | Limited | |
| Sony WH-1000XM5 | $399 | Out of Stock | |
| Dell XPS 15 | $1,299 | In Stock | |
| Logitech MX Master 3 | $99 | Limited | |
| Microsoft Surface Laptop 5 | $1,499 | In Stock | |
| HP Spectre x360 | $1,199 | Out of Stock | |
| Apple Watch Series 9 | $499 | Limited | |
| Google Pixel 7 | $599 | In Stock | |
| Bose QuietComfort Earbuds II | $279 | Out of Stock | |
| Asus ROG Zephyrus G14 | $1,899 | In Stock | |
| Sony PlayStation 5 | $499 | Limited | |
| Amazon Echo Dot (5th Gen) | $49 | In Stock | |
| NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
| Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
| Google Nest Hub (2nd Gen) | $99 | In Stock | |
| Fitbit Charge 6 | $149 | Limited | |
| Razer Blade 16 | $2,499 | Out of Stock | |
| Oculus Quest 3 | $499 | In Stock | |
| Canon EOS R8 | $1,699 | Limited | |
| DJI Mavic 3 Pro | $2,199 | In Stock | |
| Alienware Aurora R15 | $2,899 | Out of Stock | |
| SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Selection
Rows can be selectable by making first column as a selectable column.
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Search input
Search is used to make the dropdown items searchable.
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Filter
This example shows how to filter a DataTable. When using `select` filter please make sure that the `value` of the select is same as option
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Column Filter
This example shows how to filter a DataTable column.
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Hidden Columns
This example demonstrates how to implement a `"hidden column"` feature. Use the select option to hide any column.
Multiple controls
This example demonstrates how to use multiple controls within a DataTable.
Showing
to
of
products
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Fixed header
In this example, the table header remains fixed and stays sticky until the end of the table.
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|
| Apple iPhone 15 | $999 | In Stock | |
| Samsung Galaxy S23 | $899 | Limited | |
| Sony WH-1000XM5 | $399 | Out of Stock | |
| Dell XPS 15 | $1,299 | In Stock | |
| Logitech MX Master 3 | $99 | Limited | |
| Microsoft Surface Laptop 5 | $1,499 | In Stock | |
| HP Spectre x360 | $1,199 | Out of Stock | |
| Apple Watch Series 9 | $499 | Limited | |
| Google Pixel 7 | $599 | In Stock | |
| Bose QuietComfort Earbuds II | $279 | Out of Stock | |
| Asus ROG Zephyrus G14 | $1,899 | In Stock | |
| Sony PlayStation 5 | $499 | Limited | |
| Amazon Echo Dot (5th Gen) | $49 | In Stock | |
| NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
| Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
| Google Nest Hub (2nd Gen) | $99 | In Stock | |
| Fitbit Charge 6 | $149 | Limited | |
| Razer Blade 16 | $2,499 | Out of Stock | |
| Oculus Quest 3 | $499 | In Stock | |
| Canon EOS R8 | $1,699 | Limited | |
| DJI Mavic 3 Pro | $2,199 | In Stock | |
| Alienware Aurora R15 | $2,899 | Out of Stock | |
| SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Column Actions
This example demonstrates how actions can be incorporated into DataTable columns. Use the filter option to rearrange items from right to left or apply sorting in ascending or descending order.
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Export
This example shows how you can add an action such as "Copy", "PDF", etc. to a DataTable.
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|---|---|---|---|
|
|
Apple iPhone 15 | $999 | In Stock | |
|
|
Samsung Galaxy S23 | $899 | Limited | |
|
|
Sony WH-1000XM5 | $399 | Out of Stock | |
|
|
Dell XPS 15 | $1,299 | In Stock | |
|
|
Logitech MX Master 3 | $99 | Limited | |
|
|
Microsoft Surface Laptop 5 | $1,499 | In Stock | |
|
|
HP Spectre x360 | $1,199 | Out of Stock | |
|
|
Apple Watch Series 9 | $499 | Limited | |
|
|
Google Pixel 7 | $599 | In Stock | |
|
|
Bose QuietComfort Earbuds II | $279 | Out of Stock | |
|
|
Asus ROG Zephyrus G14 | $1,899 | In Stock | |
|
|
Sony PlayStation 5 | $499 | Limited | |
|
|
Amazon Echo Dot (5th Gen) | $49 | In Stock | |
|
|
NVIDIA GeForce RTX 4090 | $1,599 | Limited | |
|
|
Lenovo ThinkPad X1 Carbon | $1,799 | In Stock | |
|
|
Google Nest Hub (2nd Gen) | $99 | In Stock | |
|
|
Fitbit Charge 6 | $149 | Limited | |
|
|
Razer Blade 16 | $2,499 | Out of Stock | |
|
|
Oculus Quest 3 | $499 | In Stock | |
|
|
Canon EOS R8 | $1,699 | Limited | |
|
|
DJI Mavic 3 Pro | $2,199 | In Stock | |
|
|
Alienware Aurora R15 | $2,899 | Out of Stock | |
|
|
SteelSeries Arctis Nova Pro | $349 | Limited |
Showing
to
of
products
Ajax
An example demonstrating how to retrieve data from a JSON file. Since the example uses a local file path for the `JSON` data, it will not work directly in your environment. To make it functional, replace the `ajax` attribute with a valid JSON data URL: https://cdn.jsdelivr.net/gh/themeselection/fy-assets/assets/json/mobile-stock.json .
|
|
Product Name
|
Price
|
Availability
|
Actions |
|---|
Showing
to
of
products
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a datatables.
|
Name
|
Email
|
Status
|
Date
|
Actions |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 | |
| Alice Johnson | alicej@example.com | Current | January 15, 2024 | |
| Chris Evans | chrisev@example.com | Inactive | November 20, 2023 | |
| Dana White | danaw@example.com | Current | February 2, 2024 | |
| Ethan Hall | ethanh@example.com | Pending | April 14, 2024 | |
| Fiona Carter | fionac@example.com | Current | March 9, 2024 | |
| George Smith | georges@example.com | Inactive | December 12, 2023 | |
| Hannah Wright | hannahw@example.com | Pending | June 10, 2024 | |
| Isaac Long | isaacl@example.com | Current | August 20, 2024 | |
| Jane Davis | janed@example.com | Current | July 3, 2024 | |
| Kevin Lee | kevinl@example.com | Current | May 12, 2024 | |
| Linda Green | lindag@example.com | Inactive | October 7, 2023 |
Showing
to
of
users