JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css">
<script src="https://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script>
<button id="sc-filter">Non SC</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Model No</th>
<th>Part Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>AB1234</td>
<td>23879-09</td>
<td>This Model Comes With A SC</td>
</tr>
<tr>
<td>AB1235</td>
<td>23869-19</td>
<td>This is a normal Model</td>
</tr>
<tr>
<td>CBZ001</td>
<td>23869-01</td>
<td>This is a custom made model which has SC</td>
</tr>
<tr>
<td>INR081</td>
<td>33869-02</td>
<td>A standard model which can be customized</td>
</tr>
<tr>
<td>HBR01</td>
<td>73823-01</td>
<td>Highly customizable SC model</td>
</tr>
<tr>
<td>YZFR1</td>
<td>88820-001</td>
<td>Manufactured only on request. Equipped with SC</td>
</tr>
<tr>
<td>YZFR15</td>
<td>11120-001</td>
<td>Mid variant</td>
</tr>
</tbody>
</table>
JavaScript
$(document).ready(function() {
var table = $('#example').DataTable();
table.draw();
yadcf.init(table, [
{
column_number: 2,
filter_match_mode: 'regex',
}]);
$('#sc-filter').on('click', function() {
yadcf.exFilterColumn(table, [[2, '^(?:(?!(SC)).)*$']]);
});
} );