JSFiddle - React, Tailwind, and code Playground

by Ronald Gouldner

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/staterestore/1.0.1/js/dataTables.stateRestore.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.3.0/js/dataTables.searchBuilder.min.js"></script>

 <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.1.1/css/buttons.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.3.0/css/searchBuilder.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/staterestore/1.0.1/css/stateRestore.dataTables.min.css">

<H2>
My Dashboard Title
</H2>

<table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
               ...

CSS

/* Button Highlighting is too subtle, lets make it more obvious */
.dt-btn-split-wrapper.active button {
    color: green;
    background-color: #999999;
    background-image: none !important;
    border-style: solid !important;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable({
        dom: '<"activeStates">Blfrtip',
        stateSave: 'true',
        buttons:[ 
                { extend: 'savedStatesCreate',
                  config: {
                      preDefined: {
                          "Sort Name Search for Jen": {
                              "order": [[0,"asc"]],
                              "search": {
                                  "search": "Jenn",
                                  "smart": true,
                                  "regex": false,
                                  "caseInsensitive": true
                              }
                          },
                          "Office asc and Position asc": {
                              "order": [[2,"asc"],[1,"asc"]],
                              "search": {
                                  "search": "",
                                  "smart": true,
                                  "regex": false,
                                  "caseInsensitive": true
                              }
                          }
                      }
                  }
                }
                ]
    });
 
    table.on('draw', function() {
        var active = table.stateRestore.activeStates();
        var activeString = 'Active States: ';
        if(active.length > 0) {
            activeString += active[0].name;
            for(var i = 1; i < active.length; i++) {
                activeString += ', '+active[i].name;
            }
        }
        else {
            activeString += "No active state";
        }
        $('div.activeStates').text(activeString)
    })
 
    table.draw();
});