JSFiddle - React, Tailwind, and code Playground

by orangeman51

HTML

<script src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<div id="entryTableContainer"></div>

CSS

body * {
  font-size: 10px;
}

input {
  width: 50px;
}

JavaScript

$(function() {
  populateEntryTable()

  function populateEntryTable() {
    $('#entryTableContainer').empty();
    /* put demo data in array of objects that is used to populate DataTable */
    var entries = [{
        name: 'John',
        title: 'Coordinator',
        age: 20,
        salary: 40000
      },
      {
        name: 'Bill',
        title: 'Manager',
        age: 40,
        salary: 200000
      },
      {
        name: 'Amy',
        title: 'Manager',
        age: 31,
        salary: 150000
      }
    ];

    /*build my table*/
    $('#entryTableContainer').append('<table id="entryTable"><thead><tr></tr></thead><tbody></tbody></table>');
    for (var key in entries[0]) {
      $('#entryTable thead tr').append('<th>' + key + '</th>');
    }
    for (var i = entries.length - 1; i >= 0; i--) {
      $('#entryTable tbody').append('<tr></tr>');
      for (var key in entries[i]) {
        $('#entryTable tbody tr:last-child').append('<td>' + entries[i][key] + '</td>');
      }
    }

    $('#entryTable thead tr').clone(true).appendTo('#entryTable thead');
    var numberInputs = ['age', 'salary'];
    $('#entryTable thead tr:eq(1) th').each(function(i) {
      var title = $(this).text();
      // if the col requires a text input filter, do text input filter stuff, which works fine. Else if it requires a number range filter, do number filter stuff, which doesn't work fine.
      if (numberInputs.indexOf(title) == -1) {
        $(this).html('<input type="text" placeholder="Search">');
        $('input', this).on('keyup change', function() {
          if (entryTable.column(i).search() !== this.value) {
            entryTable.column(i).search(this.value).draw();
          }
        });
      } else if (numberInputs.indexOf(title) > -1) {
        // get min and max values in each column to set appropriate bootstrap-slider attributes
        var min;
        var max;
        $('#entryTable tbody tr').each(function(j) {
          var item =...