Tailwind CSS Datatables

How to use

1. Install jQuery.

   Install jquery via npm

   npm i jquery

2. Install Datatbles.net.

   Install datatables.net-dt via npm

   npm i datatables.net-dt

3. Add additional CSS.

   Add CSS for hiding some default elements:

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

   <script src="./assets/vendor/jquery/dist/jquery.min.js"></script> <script src="./assets/vendor/datatables.net/js/dataTables.min.js"></script>

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:

                       
                         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 usage

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 for making dropdown items searchable.

Filter

This example shows how to filter a DataTable.

                      
                        (function () {
                          const minEl = document.querySelector('#hs-input-number-min-age');
                          const maxEl = document.querySelector('#hs-input-number-max-age');
                          const { dataTable } = new HSDataTable('#hs-datatable-filter');
                  
                          dataTable.search.fixed('range', function (searchStr, data, index) {
                            const min = parseInt(minEl.value, 10);
                            const max = parseInt(maxEl.value, 10);
                            const age = parseFloat(data[2]) || 0;
                        
                            if (
                              (isNaN(min) && isNaN(max)) ||
                              (isNaN(min) && age <= max) ||
                              (min <= age && isNaN(max)) ||
                              (min <= age && age <= max)
                            ) return true;
                        
                            return false;
                          });
                        
                          minEl.addEventListener('input', () => dataTable.draw());
                          maxEl.addEventListener('input', () => dataTable.draw());
                        })();
                      
                    

Column Filter

This example shows how to filter a DataTable column.

                      
                        (function () {
                          const personEl = document.querySelector('#hs-select-column-name');
                  
                          const minEl = document.querySelector('#hs-input-number-column-age-min');
                          const maxEl = document.querySelector('#hs-input-number-column-age-max');
                  
                          const addressEl = document.querySelector('#hs-input-text-column-address');
                  
                          const { dataTable } = new HSDataTable('#hs-datatable-with-column-filter');
                  
                          dataTable.search.fixed('range', function (searchStr, data, index) {
                            const person = personEl.value === 'all' ? '' : personEl.value;
                            const name = data[1] || '';
                  
                            const min = parseInt(minEl.value, 10);
                            const max = parseInt(maxEl.value, 10);
                            const age = parseFloat(data[2]) || 0;
                  
                            const address = addressEl.value.toLowerCase();
                            const city = data[3].toLowerCase() || '';
                  
                            if (
                              (
                                person === name ||
                                person === ''
                              ) &&
                              (
                                city.includes(address) ||
                                address === ''
                              ) &&
                              (
                                (isNaN(min) && isNaN(max)) ||
                                (isNaN(min) && age <= max) ||
                                (min <= age && isNaN(max)) ||
                                (min <= age && age <= max)
                              )
                            ) return true;
                        
                            return false;
                          });
                        
                          personEl.addEventListener('change', () => dataTable.draw());
                  
                          minEl.addEventListener('input', () => dataTable.draw());
                          maxEl.addEventListener('input', () => dataTable.draw());
                  
                          addressEl.addEventListener('input', () => dataTable.draw());
                        })();
                      
                    

Hidden Columns

This example shows how to add "hidden column" functionality.

                      
                        (function () {
                          const { dataTable } = new HSDataTable('#hs-datatable-with-hidden-columns');
                          const select = HSSelect.getInstance('#hs-datatable-with-hidden-columns-select', true);
                  
                          select.element.on('change', (indices) => {
                            dataTable.columns().every(function (index) {
                              const column = this;
                  
                              if (indices.includes(index.toString())) column.visible(false);
                              else column.visible(true);
                            });
                          });
                        })();
                      
                    

Fixed header

Header is fixed until the end of the table.

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>

Column Actions

This example shows how actions can be added to DataTable columns.

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

This example shows how you can add an action such as "Copy", "PDF", etc. to a 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>