JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
<table id="flatbom" cellspacing="0" width="100%">
<thead>
<tr>
<th>Item Number</th>
<th>Reference Count</th>
<th>Part Category</th>
<th>Description</th>
<th>uom</th>
<th>Quantity</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Item Number</th>
<th>Reference Count</th>
<th>Part Category</th>
<th>Description</th>
<th>uom</th>
<th>Quantity</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>012887</td>
<td>1</td>
<td>Washer</td>
<td>Washer, flat, M6, metric, 304SS</td>
<td>EA</td>
<td>18.0</td>
</tr>
<tr>
<td>012888</td>
<td>1</td>
<td>Nut</td>
<td>Nut, flat, M6, metric, 304SS</td>
<td>EA</td>
<td>18.0</td>
</tr>
</tbody>
</table>
CSS
tfoot input {
width: 100%;
}
JavaScript
$(document).ready(function() {
$('#flatbom').dataTable({
"bFilter": true,
"dom": 'Brtip',
"buttons": ['pageLength', 'csvHtml5'],
"lengthMenu": [
[15, 25, 50, -1],
['15 rows', '25 rows', '50 rows', 'Show all']
],
"columns": [
{"width": "25%" },
null,
null,
null,
null,
null
]
});
$('#flatbom tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#flatbom').DataTable();
// 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();
}
});
});
});