JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="col-sm-12 col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Panel</h3>
        </div>
        <div class="panel-body">
          <div class="form-group">
              <table id="example" class="table table-striped table-bordered table display nowrap" cellspacing="0" width="100%">
              </table>

          </div>
          <div class="form-group">
            <button id="long" type="button" class="btn btn-default btn-block">Long Dataset</button>
          </div>
          <div class="form-group">
            <button id="short" type="button" class="btn btn-default btn-block">Short Dataset</button>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

JavaScript

$(document).ready(function() {

var table;

$('#long').click(function() {
table.clear().rows.add(dataLong).draw();
});
$('#short').click(function() {
table.clear().rows.add(dataShort).draw();
});

  $.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
  {
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
      return $('input', td).prop('checked') ? '1' : '0';
    } );
  }
  
  var columns = [ {
    "name": "check",
    "data": "check",
    "title": "Check",
    'orderDataType': "dom-checkbox",
    'render': function(data, type, full, meta) {
      var checked = (data ? "checked" : "");
      var checkbox = '<input class="checkbox" type="checkbox" ' + checked + '>';
      return checkbox;
    }
  }, 
  {
    "name": "field1",
    "data": "field1",
    "title": "Field 1"
  }, {
    "name": "field2",
    "data": "field2",
    "title": "Field 2"
  }, {
    "name": "field3",
    "data": "field3",
    "title": "Field 3"
  }
  
  ];
  
  var dataShort = [
  {
      "check" : true,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : true,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : false,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  }
  ]
  
  
    var dataLong = [
  {
      "check" : true,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : true,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : false,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : false,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : false,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  },
  {
      "check" : false,
      "field1" : "0",
      "field2" : "0",
      "field3" : "0"
  }
  ]


  table = $('#example').DataTable({
            "scrollY" : "150px",
     ...