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://nightly.datatables.net/staterestore/js/dataTables.stateRestore.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 type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.1/js/buttons.print.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.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">


<table id="example" class="display nowrap" style="width:100%">
  ...

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;
}

/* improve column visibility pop up selection button contrast */
.dt-button.buttons-columnVisibility.active {
    color: green;
    background-color: #999999;
    background-image: none !important;
    border-style: solid !important;
}

.dt-button.buttons-columnVisibility.active::before {
    position: absolute;
    right: .4rem;
    content: '✓';
    font-weight: 600;
}

.dt-button.buttons-columnVisibility {
    color: red;
    background-image: none !important;
    background-color: white !important;
    box-shadow: none !important;
    background: white !important;
    border-width: 3px !important;
    border-style: dashed !important;
}

/* Make StateRestore (Saved States) menu wider so names fit better */
/* unfortunately this make col-vis too wide as well as the pdf selection */
.dt-button-collection {
  width: 300px !important;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable({
        dom: '<"activeStates">Blftrip',
        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
                              }
                          }
                      }
                  }
                }
                ]
    });
    
    new $.fn.dataTable.Buttons( table, {
            buttons: [
                {
                    extend: 'colvis',
                    columns: ':not(.BlockHide)'
                },
                {
                    extend: 'copyHtml5',
                    text: 'Copy',
                    exportOptions: {
                        columns: ':visible', orthogonal: 'export'
                    }
                },
                {
                    extend: 'excelHtml5',
                    exportOptions: { orthogonal: 'export' }
                },
                'csvHtml5',
                {
                    extend: 'collection',
                    text: 'PDF',
                    autoClose: true,
                    buttons: [
                        {
        ...