JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css">
<script src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th><input type='checkbox' id='select-all'></input></th>
            <th>Email</th>
            <th>Company</th>
        </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
        <tr>
            <th>Email</th>
            <th>Company</th>
        </tr>
    </tfoot>
</table>
<button id='b1'>Test</button>

JavaScript

function updateCheckboxes() {
    var value = $('#select-all').prop('checked');
    $('.select-all-dependent').each(function(){
      $(this).prop('checked', value);
    });
}

// Select all checkboxes
function addHandlerToCheckbox() {
  $('#select-all').click(function(){
    updateCheckboxes();
  });
}

$(document).ready(function () {
    //http://www.datatables.net/reference/api/
    var url = "http://beta.json-generator.com/api/json/get/C83zgTc";
    var columns = [
        {defaultContent:'<input type="checkbox" class="select-all-dependent">', data:null, sortable:false},
        {title:'Email',   data:'email',   name:'email'},
        {title:'Company', data:'company', name:'company'},
        ];

    var table = $('#example').DataTable({
        processing: true,
        serverSide: false,
        ajax: url,
        columns: columns,
        drawCallback: function() {
          addHandlerToCheckbox();
          updateCheckboxes();    
        }
    });
});