• third party plugins
  • Datatables

third party plugins

Tailwind CSS Datatables

Upgrade your HTML tables with Tailwind CSS Datatables for improved search, pagination, and sorting, enhancing data navigation and management.

Require FlyonUI JS

Getting started

Setup

Note that this component requires the use of FlyonUI Datatables plugin. Below are the comprehensively outlined steps you can follow to seamlessly integrate Datatable JS with FlyonUI.

  • 1
    Step 1: Install jquery

    Install jquery using npm.

    npm i jquery
  • 2
    Step 2: Install Datatable

    Install Datatable using npm.

    npm install datatables.net
  • 3
    Step 3: Include Datatable JavaScript

    To integrate Datatable, add the following <script> tags near the end of your </body> section.

    <script src="../path/to/vendor/jquery/dist/jquery.min.js"></script>
<script src="../path/to/vendor/datatables.net/js/dataTables.min.js"></script>
  • 4
    Step 4: Update Tailwind Configuration

    To enable CSS overrides, include the path to the vendor JS files in the content section of your Tailwind configuration file. Additionally, set vendors="true" in the FlyonUI config to ensure the override CSS is generated:

    module.exports = {
  content: [
    '../path/to/datatables.net/js/dataTables.min.js',
  ],
  flyonui: {
    vendors: true // Enable vendor-specific CSS generation
  }
}

Optional Step

Add additional settings to activate the function of highlighting text selected using cmd+a in text fields. By default, Datatable blocks this functionality.

Include the JavaScript after initializing the Datatables:

window.addEventListener('load', () => {
  ...

  const inputs = document.querySelectorAll('.dt-container thead input');

  inputs.forEach((input) => {
    input.addEventListener('keydown', function (evt) {
      if ((evt.metaKey || evt.ctrlKey) && evt.key === 'a') this.select();
    });
  });
});

Class Name
Type
Description
tableComponentBase class for the table component.
datatable-ordering-asc:{tw-utility-class}ModifierA modifier that allows you to set Tailwind classes to elements inside thead th or thead td when ordering changes to asc.
datatable-ordering-desc:{tw-utility-class}ModifierA modifier that allows you to set Tailwind classes to elements inside thead th or thead td when ordering changes to desc.

DataTable Structure

Basic outline

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

<div data-datatable>
  <table>
    <thead>
      <tr>
        <th scope="col">
          Name
          <span class="icon-[tabler--chevron-up] datatable-ordering-asc:block hidden"></span>
          <span class="icon-[tabler--chevron-down] datatable-ordering-desc:block hidden"></span>
          <span class="icon-[tabler--chevron-up] datatable-ordering-asc:block hidden"></span>
          <span class="icon-[tabler--chevron-down] datatable-ordering-desc:block hidden"></span>
        </th>
        <th scope="col">
          Age
          <span class="icon-[tabler--chevron-up] datatable-ordering-asc:block hidden"></span>
          <span class="icon-[tabler--chevron-down] datatable-ordering-desc:block hidden"></span>
        </th>
        <th scope="col">
          Address
          <span class="icon-[tabler--chevron-up] datatable-ordering-asc:block hidden"></span>
          <span class="icon-[tabler--chevron-down] datatable-ordering-desc:block hidden"></span>
        </th>
        <th scope="col" class="--exclude-from-ordering">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Brown</td>
        <td>45</td>
        <td>New York No. 1 Lake Park</td>
        <td>
          <button type="button">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

  <div style="display: none;" data-datatable-paging>
    <button type="button" data-datatable-paging-prev>
      <span aria-hidden="true">«</span>
      <span class="sr-only">Previous</span>
    </button>
    <div data-datatable-paging-pages></div>
    <button type="button" data-datatable-paging-next>
      <span class="sr-only">Next</span>
      <span aria-hidden="true">»</span>
    </button>
  </div>
</div>

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.

Illustrations

Scrollable table body (tbody)

Tbody makes a scroll.

Selection

Rows can be selectable by making first column as a selectable column.

Search input

Search is used to make the dropdown items searchable.

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

Column Filter

This example shows how to filter a DataTable column.