JSFiddle - React, Tailwind, and code Playground

by Erik

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<form class='filter-form'>
    <h3>Filters</h3>
     <label for="positionSelect">Position:</label>
     <select id="postionSelect" class='filter' name="positionSelect" data-column-index='1'>
                <option></option>
                <option>Accountant</option>
                <option>Chief Executive Officer (CEO)</option>
                <option>Chief Financial Officer (CFO)</option>
                <option>Chief Marketing Officer (CMO)</option>
                <option>Chief Operating Officer (COO)</option>
                <option>Customer Support</option>
                <option>Data Coordinator</option>
                <option>Developer</option>
                <option>Development Lead</option>
                <option>Director</option>
                <option>Financial Controller</option>
                <option>Integration Specialist</option>
                <option>Javascript Developer</option>
                <option>etc..</option>
     </select>
     <label for="officeSelect">Office:</label>
     <select id="officeSelect" class='filter' name="officeSelect" data-column-index='2'>
                <option></option>
                <option>Edinburgh</option>
                <option>London</option>
                <option>New York</option>
                <option>San Francisco</option>
                <option>Sidney</option>
                <option>Singapore</option>
                <option>Tokyo</option>
      </select>
        <button type="button" id="clrbtn">&times;   Clear Filters</button>
</form>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
        ...

CSS

.filter-form {
  margin-bottom: 30px; 
}
.filter-form div {
  margin-bottom: 10px; 
}

JavaScript

$(document).ready(function () {

    // DataTable
    var dtable = $('#example').DataTable();

    $('.filter').on('keyup change', function () {
        dtable.column($(this).data('columnIndex')).search(this.value).draw();
    });
    
    $('#clrbtn').click(function() {
      document.getElementById('postionSelect').selectedIndex = 0;
      document.getElementById('officeSelect').selectedIndex = 0;
      dtable.columns().search('');
      dtable.search('');
      dtable.draw();
    }); 
});