JSFiddle - React, Tailwind, and code Playground

by Mark Achten

HTML

<link rel="stylesheet" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/css/dataTables.checkboxes.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.9/js/dataTables.checkboxes.min.js"></script>
<table>
  <thead>
    <tr>
      <th></th>
      <th>
        Col
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="hidden" value="1" /> </td>
      <td>1
        <input type="hidden" name="Licenses.Index" value="0">
        <input id="Licenses_0__IsEditable" name="Licenses[0].IsEditable" type="hidden" value="False">
        <input id="Licenses_0__IsSelected" name="Licenses[0].IsSelected" type="hidden" value="True">
        <input id="Licenses_0__BundleId" name="Licenses[0].BundleId" type="hidden" value="1">
      </td>
    </tr>
    <tr>
      <td>
        <input type="hidden" value="2" />
      </td>
      <td>2
        <input type="hidden" name="Licenses.Index" value="1">
        <input id="Licenses_1__IsEditable" name="Licenses[1].IsEditable" type="hidden" value="true">
        <input id="Licenses_1__IsSelected" name="Licenses[1].IsSelected" type="hidden" value="True">
        <input id="Licenses_1__BundleId" name="Licenses[1].BundleId" type="hidden" value="2">
      </td>
    </tr>
  </tbody>
</table>
<hr />

JavaScript

$(function() {

  var tables = $('table');
  $.each(tables, function(indexer, table) {

    var options = {};

    options['dom'] = 'rtllpi';
    options['columnDefs'] = [];
    options['deferRender'] = true;
    options['select'] = {
      style: 'multi',
      selector: 'td:first-child'
    };
    options['initComplete'] = function(setting) {
      var api = this.api();

      // and make sure that the checkbox is selected (return true to select).
      var rowsToSelect = api.rows(function(idx, data, node) {
        var fields = $(node).find(':hidden[name*="IsSelected"]');
        var result = false;
        for (var i = 0; i < fields.length; i++) {
          var value = $(fields[i]).val().toLowerCase() === 'true';
          if (value) {
            result = true;
            break;
          }
        }

        return result;
      });
      var selectableRowIds = rowsToSelect.indexes();
      api.cells(selectableRowIds, 0).checkboxes.select();

      // Get all rows for which to enable the checkbox (return true to enable).
      // I'll disable by default and only enable where I can't find
      // a IsEdiot
      var rowsToDisable = api.rows(function(idx, data, node) {
        var fields = $(node).find(':hidden[name*="IsEditable"]');
        var result = false;
        for (var i = 0; i < fields.length; i++) {
          var value = $(fields[i]).val().toLowerCase() === 'false';
          if (value) {
            result = true;
            break;
          }
        }
        return result;
      });
      var disableRowIds = rowsToDisable.indexes();
      api.cells(disableRowIds, 0).checkboxes.disable();
    };

    var checkBoxDef = {
      'checkboxes': {
        selectRow: true,
        selectAllPages: false,
        selectCallback: function(nodes, selected) {
          // align the selected value with the IsSelected hidden field. The IsSelected
          // hidden field is used in the controllers to determine on what data to 
          // perform...