JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-flash-1.2.1/b-html5-1.2.1/b-print-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.1/b-colvis-1.2.1/b-flash-1.2.1/b-html5-1.2.1/b-print-1.2.1/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.2/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
<table id="myTable" class="display">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th><input type="text" id="search-category" placeholder="search category"></th>
<th><input type="text" id="search-sub-category" placeholder="search sub-category"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>MIBs/Devices</th>
<th>OID</th>
<th>Type</th>
<th>Category</th>
<th>Sub-Category</th>
<th>Level</th>
<th>one</th>
<th>two</th>
<th>three</th>
<th>four</th>
<th>Type2</th>
<th>Clearing Trap</th>
<th>Clearing Trap OID</th>
<th>Remarks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="alt">
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
</tr>
<tr>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy data</td>
<td>dummy...
JavaScript
$(document).ready(function(){
var table = $('#myTable').DataTable();
$('#search-category').on('change',function(){
table
.column(3)
.search(this.value)
.draw();
}),
$('#search-sub-category').on('change',function(){
table
.column(4)
.search(this.value)
.draw();
})
})