JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="userTable" class="display" width="100%">
  <thead>
    <tr>
      <th>Enable/Disable</th>
      <th>Number</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

jQuery(function($) {
  data = [
    ['User_488', 'User 1', 'disable'],
    ['User_487', 'User 2', 'disable'],
    ['User_477', 'User 3', 'disable'],
    ['User_490', 'User 4', 'disable'],
    ['1000', 'User 5', 'enable'],
    ['1001', 'User 6', 'enable'],
    ['1002', 'User 7', 'enable'],
    ['1004', 'User 8', 'enable']
  ]

  var t = $('#userTable').DataTable({
  	"data": data,
    'columns': [
    		{
        		"render": function(data, type, row, meta){
            		var checkbox = $("<input/>",{
                		"type": "checkbox"
                });
            		if(row[2] === "enable"){
                		checkbox.attr("checked", "checked");
                    checkbox.addClass("checkbox_checked");
                }else{
                		checkbox.removeAttr("checked");
                		checkbox.addClass("checkbox_unchecked");
                }
                return checkbox.prop("outerHTML")
            }
        },
    		{
        		"render": function(data, type, row, meta){
            		return row[0];
            }
        },
    		{
        		"render": function(data, type, row, meta){
            		return row[1];
            }
        }
    ],
    order: []
  });
  
});