JSFiddle - React, Tailwind, and code Playground

by sohal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.1/switchery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.1/switchery.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table id="datatable-buttons" class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Username</th>
      <th>User Group</th>
      <th>Active</th>
    </tr>
  </thead>


</table>

<input type="checkbox" class="js-switch" checked /> Check

CSS

/** Switchery **/

.switchery {
  width: 32px;
  height: 20px;
}

.switchery>small {
  width: 20px;
  height: 20px;
}


/** /Switchery **/

JavaScript

// Switchery
$(document).ready(function() {
  if ($(".js-switch")[0]) {
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function(html) {
      var switchery = new Switchery(html, {
        color: '#26B99A'
      });
    });
  }
});


$(document).ready(function() {
  var table = $('#datatable-buttons').DataTable({
    "ajax": {
      "url": "https://api.myjson.com/bins/n9t0",
      "dataSrc": ""
    },
    "columns": [{
      "data": "name"
    }, {
      "data": "username"
    }, {
      "data": "user_group"
    }, {
      "data": "state",
      render: function(data, type, row) {
        return (data === 'active') ?
          '<input type="checkbox" class="js-switch" checked />' :
          '<input type="checkbox" class="js-switch" />';
      }
    }],

    "columnDefs": [{
      data: 2,
      render: function(data, type, row) {
        return '$' + data;
      }
    }, {
      data: -1,
      render: function(data, type, row) {
        return data > 0 ?
          '<label class="label label-danger">' + data + '</label>' :
          '<label class="label label-success">' + data + '</label>';


      }
    }]

  });
});