JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<hr>
<label>
<input type="checkbox" class="filter" value="Available"/>Available</label>
<label>
<input type="checkbox" class="filter" value="Active"/>Active</label>
<hr>
<table id="table-candidates-list" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>Available</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>Active</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Integration Specialist</td>
<td>San Francisco</td>
<td>66</td>
<td>Invited</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>Employed within the NHS</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>33</td>
<td>No longer interested in the NHS</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>Active</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>59</td>
<td>Active</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>Available</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San...
JavaScript
$(document).ready(function() {
var table = $('#table-candidates-list').dataTable({
responsive: true,
"info": false,
"pagingType": "numbers",
button: true
});
$('input.filter').on('change', function() {
table.fnDraw();
});
$.fn.dataTable.ext.search.push(
function(settings, searchData, index, rowData, counter) {
// No filtered checked - show all rows
if ($('.filter:checked').length === 0) {
return true;
}
// Filter(s) checked, apply logic
var found = false;
$('.filter').each(function(index, elem) {
if (elem.checked && rowData[0] === elem.value) {
found = true;
}
});
return found;
}
);
});