Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Datatables

Enhance HTML tables with Tailwind CSS Datatables, featuring search, paging, and sorting. Improve user experience with efficient data navigation and management.

Requires Additional Installation

Note that this component requires the use of the third-party DataTables.net and jQuery libraries.

Learn more

Requires JS

Note that this component requires the use of Preline UI's Datatables plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Installation

  1. Install jQuery.

    Install jquery via npm

    Terminal 
                              
                            npm i jquery

  2. Install Datatbles.net.

    Install datatables.net-dt via npm

    Terminal 
                              
                            npm i datatables.net-dt

  3. Add additional CSS.

    Add CSS for hiding some default elements:

    CSS 
                              
                            .dt-layout-row:has(.dt-search),
                            .dt-layout-row:has(.dt-length),
                            .dt-layout-row:has(.dt-paging) {
                              display: none !important;
                            }

  4. Add the Datatables JavaScript

    Include the JavaScript <script> near the end of your </body> tag:

    HTML

  5. 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:

    JavaScript 
                              
                            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();
                                });
                              });
                            });

Basic datatable

Default datatable

Start with a basic datatable built from standard table markup.

All examples stay horizontally scrollable on smaller screens for easier data browsing.

Scrollable tbody

Keep the header in place while only the table body scrolls inside a fixed-height area.

Row selection

Make rows selectable by turning the first column into a checkbox-based selection control.

Table search

Connect an external search field to filter datatable rows by keyword.

Table filters

Apply custom filter controls to narrow the visible rows.

Column filters

Filter each column independently with dedicated inputs or selectors.

Hidden columns

Hide selected columns while keeping the underlying data available in the datatable.

Fixed table header

Keep the table header pinned while scrolling through long datasets.

  1. Install Datatables.net-fixedheader.

    Install datatables.net-fixedheader via npm 

    npm i datatables.net-fixedheader

  2. Add Datatables.net-fixedheader to the page.

    Include the JavaScript <script> near the end of your </body> tag: 

    <script src="./node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
Name
Age
Address
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

Combined controls

Combine search, filters, selection, and other controls around the same datatable.

Column Actions

Use header action menus to sort or reorder columns directly from the table UI.

  1. Install Datatables.net-colreorder.

    Install datatables.net-colreorder-dt via npm 

    npm i datatables.net-colreorder-dt

  2. Add Datatables.net-colreorder to the page.

    Include the JavaScript <script> near the end of your </body> tag: 

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

Export actions

Add export actions such as copy, CSV, Excel, PDF, or print to the datatable.

  1. Install Datatables.net-buttons.

    Install datatables.net-buttons via npm 

    npm i datatables.net-buttons jszip pdfmake

  2. Add Datatables.net-buttons to the page.

    Include the JavaScript <script> near the end of your </body> tag: 

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

Destroy and reinitialize

Use the destroy method to remove a datatable instance, then initialize it again when needed.

© 2026 Preline Labs.