JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/t/dt/jq-2.2.0,dt-1.10.11,fh-3.1.1,r-2.0.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/jq-2.2.0,dt-1.10.11,fh-3.1.1,r-2.0.2/datatables.min.css">
<table class="display compact cell-border" id="example">
  <thead class="searchable">
    <tr class="tableizer-firstrow">
      <th>Code</th>
      <th>Location</th>
    </tr>
  </thead>
  <tfoot class="searchable">
    <tr class="tableizer-firstrow">
      <th>Code</th>
      <th>Location</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>6445</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

CSS

a {
    color: #5C0383;
    text-decoration: none;
	font-weight:bold;
}
body {
    font: normal 14px Verdana, Arial, sans-serif;
}
::-webkit-input-placeholder { color: black; }
::-moz-placeholder {color: black; }
:-ms-input-placeholder { color: black; } 
:-o-input-placeholder { color: black; } 
input[type="search"]{
  height:22px;
  font-size:20px;
  background: #b3b3b3 !important;
  border: none;
  padding-left: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
input[type="text"]{
  background: #b3b3b3 !important;
  border: none;
  padding-left: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 99%;
  visibility:visible !important;
}
tfoot {
    display: table-header-group;
}
table.dataTable.compact tfoot{
   visibility:hidden;
}
.dataTables_scrollFoot {
	height:0px;
}

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
    		scrollY:"200px",
    		        scrollCollapse: true,
    		        paging: false,
    		    stateSave: true,
    		    stateDuration: 60 * 60 * 24 * 7,
    		    stateSaveParams: function (settings, data) {data.search.search = "";},
    } );
	
	//Highlight slected row
        var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
	
	//Search per column
	// Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="'+title+'"/>' );
    } );
// Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
	
} );