• 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.

Hidden Columns

This example demonstrates how to implement a "hidden column" feature. Use the select option to hide any column.

Fixed header

In this example, the table header remains fixed and stays sticky until the end of the table.

  • 1
    Step 1: Install Datatables.net-fixedheader.

    Install datatables.net-fixedheader using npm.

    npm i datatables.net-fixedheader
  • 2
    Step 2: Include Datatable JavaScript

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

    <script src="../path/to/vendor/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>

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.

  • 1
    Step 1: Install Datatables.net-colreorder-dt.

    Install datatables.net-colreorder-dt using npm.

    npm i datatables.net-colreorder-dt
  • 2
    Step 2: Include Datatable JavaScript

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

    <script src="../path/to/vendor/datatables.net-colreorder/js/dataTables.colReorder.min.js"></script>

Export

This example shows how you can add an action such as “Copy”, “PDF”, etc. to a DataTable.

  • 1
    Step 1: Install Datatables.net-buttons jszip pdfmake.

    Install datatables.net-buttons jszip pdfmake using npm.

    npm i datatables.net-buttons jszip pdfmake
  • 2
    Step 2: Include Datatable JavaScript

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

    <script src="./path/to/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="./path/to/vendor/jszip/dist/jszip.min.js"></script>
<script src="./path/to/vendor/pdfmake/build/pdfmake.min.js"></script>
<script src="./path/to/vendor/pdfmake/build/vfs_fonts.js"></script>
<script src="./path/to/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="./path/to/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>

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 .

avaScript behavio

Destroy/Reinitialize

new
The destroy method is provided to facilitate the destruction of a datatables.

JavaScript behavior

Data Options

PARAMETERS
DESCRIPTION
data-datatableActivate a Datatable by specifying on an element. Should be added to the container.
:pageBtnClassesSets the specified classes to each paging element inside the data-datatable-paging-pages.
:rowSelectingOptions.selectAllSelectorA valid CSS selector (the element must be a checkbox or radio button), when the element is changed, all elements specified by rowSelectingOptions.individualSelector (or, if not specified, then data-datatable-row-selecting-individual) on the current page will be changed.
:rowSelectingOptions.individualSelectorA valid CSS selector (the element must be a checkbox or radio button), affects the change of the element specified in rowSelectingOptions.selectAllSelector, if not all elements are selected on the current page, then it switches to unchecked state, if vice versa, then in checked.

Class Options

PARAMETERS
DESCRIPTION
--exclude-from-orderingmodifierA modifier that allows you to disable the ordering functionality in a column. Should be added to the thead column.

Selectors

PARAMETERS
DESCRIPTION
data-datatable-searchSpecifies which input element will handle searching within the datatable.
data-datatable-page-entitiesIndicates the select dropdown element used to change the number of rows displayed per page.
data-datatable-pagingRepresents the container for pagination controls, including next and previous buttons.
data-datatable-paging-prevSpecifies the button to go to the previous page.
data-datatable-paging-nextSpecifies the button to go to the next page.
data-datatable-row-selecting-allDefines the Select all checkbox or radio button to select all rows in the table (if not set in rowSelectingOptions.selectAllSelector).
data-datatable-row-selecting-individualSpecifies the checkbox or radio button to select individual rows (if not set in rowSelectingOptions.individualSelector).
data-datatable-infoRefers to a container that displays information about the table, such as record counts.
data-datatable-info-fromIndicates the element showing the starting record number.
data-datatable-info-toIndicates the element showing the ending record number.
data-datatable-info-lengthRefers to the element displaying the total number of records.

Methods

The HSDataTable object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSRemoveElement.getInstance(target, isInstance)
Returns the element associated to the target.
  • target should be a Node or string (valid selector).
  • isInstance boolean. Returns the instance instead of Node if true.
  • First Approach:
    • Only retrieves the dataTable property from the returned object.
    • Useful if you only need to work with the dataTable and not the rest of the parent HSDataTable object.
const { dataTable } = new HSDataTable('#datatable');
  • Second Approach:
    • Retrieves the entire object from HSDataTable.
    • Gives access to both the dataTable property and any other methods or properties the HSDataTable object may have.
const dataTable  = new HSDataTable('#datatable');

Destroy instance.

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

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

Events

When datatable redrawn event example.

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

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