JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table class="table table-striped draggable sortable dataTable" id="table2">
<thead>
    <tr>
        <th class="text-center"> <input class="check_box_all no-sort" id="check_all" type="checkbox" title="Check All"></th>
        <th class="text-center">Company Name </th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td class="text-center"><input type="checkbox" class="check_box"></td>
        <td class="text-center">Med Assets Company</td>
    </tr>
        <tr class="odd gradeX">
        <td class="text-center"><input type="checkbox" class="check_box"></td>
        <td class="text-center">Med Assets Company</td>
    </tr>
            <tr class="odd gradeX">
        <td class="text-center"><input type="checkbox" class="check_box"></td>
        <td class="text-center">Link Inc</td>
    </tr>
</tbody>

JavaScript

$(document).ready(function() {
$('#table2 thead th').slice(1).each(function () {
    var title = $('#table2 thead th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="' + title + '" />');
 });

var table = $('#table2').DataTable({
    "dom": 'C<"clear">lfrtip',
    "sPaginationType": "full_numbers",});

 var tableResult = table.columns().eq(0);
if (tableResult !== null) {
    tableResult.each(function (colIdx) {
        $('input', table.column(colIdx).header()).on('keyup change', function () {
            table
                    .column(colIdx)
                    .sort()
                    .search(this.value)
                    .draw();
        });
    });
}
})