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>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></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>
Search Builder Icon Example <i class="fas fa-search"></i>
</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>
           ...

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

let startUpActions='';

function stateRestoreAjax(data,callback) {
    if (data.action === 'save') {
        startUpActions = startUpActions + '.' + data.action + ':' + Object.keys(data.stateRestore)[0];
    } else {
        startUpActions = startUpActions + '.' + data.action ;
    }
}

function issueServerCall(data,callback) {
    // Do nothing to simulate server failing to perform the action and just return false;
    alert("Server Call Failed action:" + data.action);
    return false;
}

$(document).ready(function() {
    var table = $('#example').DataTable({
        dom: '<"activeStates">Blfrtip',
        saveState: true,
        language: {
            searchBuilder: {
                button: {
                    0: '<i class="fas fa-search"></i>',
                    1: '<i class="fas fa-search"></i> (one selected)',
                    _: '<i class="fas fa-search"></i> (%d)'
                }
            }
        },
        buttons:['searchBuilder', {
                    extend: 'savedStatesCreate',
                    config: {
                        ajax: issueServerCall,
                        preDefined: {
                        "London": {
                            "order": [[1,"asc"]],
                            "search": {
                                "search": "London",
                                "smart": true,
                                "regex": false,
                                "caseInsensitive": true
                            },
                            "columns": [
                                { "visible": true },
                                { "visible": true },
                                { "visible": true },
                                { "visible": true },
                                { "visible": false },
                                { "visible": true }
                            ]
                        },
                        "New York": {
                            "order":...