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>
My Dashboard Title <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>
            </tr>
  ...

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

$('#example').DataTable({
    searchBuilder: {
        conditions: {
            string: {
                '=': {
                    init: function(that, fn, preDefined = null) {
                        let uniqueData=that.s.dt.column(that.s.dataIdx).data().unique();
                        if (uniqueData.length > 50) {
                          //debugger;
                          // Declare the input element
                          let el = $('<input/>')
                              .addClass(that.classes.value)
                              .addClass(that.classes.input)
                              .on('keyup', function(e) { 
                                if (e.key === 'Enter' || e.keyCode === 13) { 
                                  console.log("searching for [" + this.value + "]"); 
                                  fn(that, this); 
                                }
                              });
 
                          // If there is a preDefined value then add it
                          if (preDefined !== null) {
                              $(el).val(preDefined[0]);
                          }
                          console.log("Returning Large Values input.")
                          return el;
                        } else {
                          //  How do I return a selection list instead of an 
                          //  input field ?
                          let el = $('<select/>')
                              .addClass(that.classes.value)
                              .addClass(that.classes.input)
                              .on('input', function() { fn(that, this); });
                          $.each(uniqueData, function(i, p) {
                              el.append($('<option></option>').val(p).html(p));
});
                          console.log("Returning Small Values input.")
                          return el;
                        }
                        return el;
                    }
              ...