JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<select id="select">
<option>Seq.</option>
<option>Name</option>
<option>Position</option>
<option>Office</option>
<option>Start date</option>
<option>Salary</option>
</select>
<table id="example">
<thead>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Seq.</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>2</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>22</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>6</td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>41</td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>55</td>
<td>Airi Satou</td>
...
CSS
.toolbar {
float: right;
}
JavaScript
var table = $('#example').DataTable({
dom: '<l<"toolbar">f>rtip',
language: {
search: "_INPUT_", //To remove Search Label
searchPlaceholder: "Search..."
}
})
$("div.toolbar").html(select);
$('.dataTables_filter input').unbind().bind('keyup', function() {
var colIndex = document.querySelector('#select').selectedIndex;
table.column( colIndex).search( this.value ).draw();
});
$('#select').change(function() {
table.columns().search('').draw();
});