Tailwind CSS DataTable Plugin API

Installation

To get started, install DataTable plugin via npm, else you can skip this step if you are already using Preline UI as a package.

1. Install the plugin

   Install @preline/datatable via npm

   Terminal

                             
                               npm i jquery datatables.net-dt @preline/datatable
                             
                           

2. Add the plugin CSS

   Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
                               
                               /* @preline/datatable */
                               /* [!code highlight:3] */
                               @source "../node_modules/@preline/datatable/*.js";
                               @import "./node_modules/@preline/datatable/variants.css";
                               @import "./node_modules/@preline/datatable/theme.css";
   
                               /* [!code highlight:5] */
                               .dt-layout-row:has(.dt-search),
                               .dt-layout-row:has(.dt-length),
                               .dt-layout-row:has(.dt-paging) {
                                 display: none !important;
                               }
                             
                           

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/datatables.net-dt/js/dataTables.dataTables.min.js"></script> <script src="./node_modules/@preline/datatable/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <!-- [!code highlight:2] --> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/datatables.net-dt/js/dataTables.dataTables.min.js"></script> <script type="module"> // [!code highlight:3] import HSDataTable from "@preline/datatable/non-auto.mjs"; new HSDataTable(document.querySelector("#datatable")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module. jQuery and DataTable are referenced as globals — expose them on window before importing the plugin.

   JavaScript (auto)

                             
                               import jQuery from "jquery";
                               window.jQuery = jQuery;
                               window.$ = jQuery;
                               import DataTable from "datatables.net";
                               window.DataTable = DataTable;
                               
                               import "@preline/datatable";
                             
                           

   JavaScript (non-auto)

                             
                               import jQuery from "jquery";
                               window.jQuery = jQuery;
                               window.$ = jQuery;
                               import DataTable from "datatables.net";
                               window.DataTable = DataTable;
                               
                               import HSDataTable from "@preline/datatable/non-auto";
                               
                               HSDataTable.autoInit();
                               
                               // Or initialize a specific element manually
                               const el = document.querySelector("#datatable");
                               if (el) new HSDataTable(el);
                             
                           

Example

Here is a basic example of a datatable with advanced features.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

CSS

Please add the following CSS to the head. This is necessary because Datatables.net does not allow to add custom markup with options disabled, such as paging: false or searching: false.

Class Options

Selectors

Tailwind Modifiers

Methods

The HSDataTable object is contained within the global window object

                      
                        const { element } = HSDataTable.getInstance('#datatable', true);
                        const destroyBtn = document.querySelector('#destroy-btn');

                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });
                      
                    

Events

                      
                        const { element } = HSDataTable.getInstance('#hs-datatable', true);
                        const { dataTable } = element;

                        dataTable.on('draw.dt', () => {
                          console.log('Table redrawn!');
                        });
                      
                    

Ready to use Components

Datatables

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Datatables examples