JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<!DOCTYPE html>

<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"></script>
  
  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.2/jquery.dataTables.yadcf.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.2/jquery.dataTables.yadcf.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.2/jquery.dataTables.yadcf.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.2/jquery.dataTables.yadcf.min.js"></script>


  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>

<body>
  <table width="100%" id="dataset"></table>
</body>

JavaScript

$(function() {
  dtObj = $("#dataset").DataTable({
    "buttons": [{
      "columns": ":gt(1)",
      "extend": "colvis",
      "text": "Series"
    }],
    "columns": [{
      "data": "_include",
      "render": function(data, type, row, meta) {
        var res = '';
        if (row._include) {
          res = '<span onclick="toggleRecord(' + row._id + ')">' + $("#dtincl").html() + "</span>";
        } else {
          res = '<span onclick="toggleRecord(' + row._id + ')">' + $("#dtexcl").html() + "</span>";
        }
        return res;


      },
      "title": "Include",
      "visible": false,
      "width": "4em;"
    }, {
      "data": "_id",
      "title": "ID",
      "visible": false
    }, {
      "className": "text-right",
      "data": "Car",
      "title": "Car",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Eyes",
      "title": "Eyes",
      "visible": false,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Family",
      "title": "Family",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Hand",
      "title": "Hand",
      "visible": true,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "HealthCare",
      "title": "HealthCare",
      "visible": false,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Height",
      "title": "Height",
      "visible": true,
      "width": "6%"
    }, {
      "data": "Major",
      "title": "Major",
      "visible": true,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Marriage",
      "title": "Marriage",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Party",
      "title": "Party",
      "visible": false,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Pot",
      "title": "Pot",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Sex",
      "title": "Sex",
      "visible": false,
      "width":...