1. Plugins
  2. Datatables

Plugins

Tailwind CSS Datatables

Datatables solutions for massive datasets.

Datatables

Installation

To get started, install Datatables.net plugin via npm with Preline UI's Datatables plugin, you may skip Preline UI's plugin installation step if you are already using Preline UI as a package.

                      
                        npm i datatables.net-dt @preline/datatable

Example

Here is a basic example of a datatable with advanced features.
Name
Age
Address
Action
Christina Bersh 45 4222 River Rd, Columbus
David Harrison 27 2952 S Peoria Ave, Tulsa
Anne Richard 31 255 Dock Ln, New Tazewell
Samia Kartoon 45 4970 Park Ave W, Ohio
David Harrison 27 4222 River Rd, Columbus
Brian Halligan 31 2952 S Peoria Ave, Tulsa
Andy Clerk 45 1818 H St NW, Washington
Bart Simpson 27 3 Grace Dr, New Mexico
Camila Welters 45 4531 W Saile Dr, North Dakota
Oliver Schevich 27 2126 N Eagle, Meridian, Illinois
Inna Ivy 31 3817 Beryl Rd, Nebraska
Jessica Williams 27 4807 3rd Ave, New Hampshire
James Collins 31 Melbourne No. 1 Lake Park
Costa Quinn 27 New York No. 1 Lake Park
Jim Green 27 LA No. 1 Lake Park
Joe Black 31 Sidney No. 1 Lake Park
Isabella Cherry 27 4222 River Rd, Columbus
Alex Tacker 31 2952 S Peoria Ave, Tulsa
Endy Ruiz 45 1818 H St NW, Washington
Jack Li 27 3 Grace Dr, New Mexico

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.

Data Options

Name Description Options Default value
data-hs-datatable Activate a Datatable by specifying on an element. Should be added to the container. — —
:pageBtnClasses Sets the specified classes to each paging element inside the data-hs-datatable-paging-pages. string -
:rowSelectingOptions.selectAllSelector A 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-hs-datatable-row-selecting-individual) on the current page will be changed. string [data-hs-datatable-row-selecting-all]
:rowSelectingOptions.individualSelector A 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. string [data-hs-datatable-row-selecting-individual]

Class Options

Name Description
--exclude-from-ordering A modifier that allows you to disable the ordering functionality in a column. Should be added to the thead column.

Selectors

Name Description
data-hs-datatable-search Defines which element will be responsible for searching in the datatable (must be an input).
data-hs-datatable-page-entities Determines which element will be responsible for switching the number of elements on the page (must be a select, depends on the change event).
data-hs-datatable-paging Defines a paging container, that contains pagination, next and previous buttons.
data-hs-datatable-paging-prev Defines a previous button element.
data-hs-datatable-paging-next Defines a next button element.
data-hs-datatable-row-selecting-all Defines a "Select all" checkbox/radio, if it's not specified in the rowSelectingOptions.selectAllSelector parameter.
data-hs-datatable-row-selecting-individual Defines a checkbox/radio that will be responsible for selecting a specific row if it is not specified in the rowSelectingOptions.individualSelector parameter.
data-hs-datatable-info Defines an info container.
data-hs-datatable-info-from Defines an element that showing start number.
data-hs-datatable-info-to Defines an element that showing end number.
data-hs-datatable-info-length Defines an element that showing recordsTotal number.

Tailwind Modifiers

Name Description
hs-datatable-ordering-asc:* A modifier that allows you to set Tailwind classes to elements inside thead th or thead td when ordering changes to asc.
hs-datatable-ordering-desc:* A modifier that allows you to set Tailwind classes to elements inside thead th or thead td when ordering changes to desc.

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

Destroy instance.

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

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

Events

Datatables.net

Please note that this component requires the use of the Datatables.net plugin. Most events available in the plugin are available in our wrapper.

Check Events

When datatable redrawn event example.

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

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

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Plugins UI Mockups
Check out Preline UI Components