JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<h1>DataTable Check All Example</h1>
<table class="display dataTable" id="flow-table" border="1">
    <thead>
        <th class="check">
            <input type="checkbox" id="flowcheckall" value="" />&nbsp;All
        </th>
        <th>Name</th>
        <!-- <th>Cookie</th> -->
        <th>Priority</th>
    </thead>
    <tbody>
    </tbody>
</table>
<div id="dialog" title="multiselect">
    Put multiselect here
</div>

JavaScript

$(document).ready(function () {
    var str = "";
    for (i = 0; i < 25; i++) {
        a = i + 1;
        str += "<tr><td><input type='checkbox' id='checkall' name='mydata' value=" + 
                a + "></td><td>a" + a + "</td><td>name" + a + "</td></tr>";
    }
    $("#flow-table > tbody").append(str);
    oTableStaticFlow = $('#flow-table').dataTable({
        "aoColumnDefs": [{
            'bSortable': false,
            'aTargets': [0]
        }],
    });

    $("#flowcheckall").click(function () {
        $('#flow-table tbody input[type="checkbox"]').prop('checked', this.checked);
    });
    
 
    $("#flow-table > tbody").on('click', ':checkbox', function(){
          
    });
    
});