JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#example').DataTable({
"lengthMenu": [
[10, 50, 100, -1],
[10, 50, 100, "All"]
],
stateSave: true,
cache: true,
responsive: true,
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
initComplete: function() {
this.api().columns().every(function() {
var column = this;
if (column.index() !== 4 && column.index() !== 5 && column.index() !== 6 && column.index() !== 7 && column.index() !== 10) {
$(column.header()).append("<br>");
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
});
}
});} );
</script>
...