JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<div class="container">
    <div id="demo">
        <div class="btn-toolbar">
            <div id="coursetoggle" class="btn-group" data-toggle="buttons">
                <label class="btn btn-default active" id="btn1">
                    <input type="radio" checked="checked" name="RadioGroup1" id="showcourse" class="course-check" data-course="yes" />MY courses</label>
                <label class="btn btn-default" id="btn2">
                    <input type="radio" name="RadioGroup1" id="showall" class="course-check" data-course="*" />ALL courses</label>
            </div>
            <div id="synchronize" class="btn-group">
                <button type="button" class="btn btn-info" value="Synchronize" onclick="location.reload(true)"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>

                </button>
            </div>
        </div>
        <table id="example" class="table table-hover table-bordered display responsive nowrap" cellspacing="0" width="100%">
            <caption></caption>
            <thead>
                <tr>
                    <th class="never">Date</th>
                    <th class="all">&nbsp;</th>
                    <th class="all">Subject</th>
                    <th class="never">Attending</th>
                    <th class="all">AM</th>
                    <th class="all">PM</th>
                    <th class="min-tablet-p">Building</th>
                    <th...

CSS

body {
    font-size: 140%;
}
table caption {
    margin:5px 0px 5px 0px;
    padding:0px;
    text-align:left;
}
/* Ensure that the demo table scrolls */
 th, td {
    white-space: nowrap;
}
tr.group, tr.group:hover, tr.group td, tr.group td:hover {
    background-color: #e1e2f1 !important;
}
#synchronize span.glyphicon {
    color:#FFF !important;
}
#example_filter input {
    width:69%;
}
#example_filter .btn {
    margin: 0px !important;
    float:right !important;
    width: 10px;
    color: #999;
}
div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}
.btn-toolbar {
    float:left;
    width: 50%;
    margin:0px;
}
#coursetoggle {
    width: 80%;
    float: left;
}
#coursetoggle .btn {
    width: 50%;
}
#synchronize {
    width: 15%;
}
#example_filter input {
    width:69%;
}
#example_filter .btn {
    margin: 0px !important;
    float:right !important;
    width: 10px;
    color: #999;
}
.btn-group span.glyphicon {
    color:#0194CB;
}
.going {
    color:#0194CB !important;
}
.notgoing {
    color:#ddd !important;
}
#example thead th, #example thead td {
    background-color: #69a4d1 !important;
    color: white;
}
.centerit {
    text-align:center !important;
}
.nobreak {
    white-space: nowrap !important;
}
.yes {
    color:#31708f;
    font-weight:bold;
}
.no {
    color:#ddd;
    text-align:center;
}
.highlight, .highlight:hover {
    background-color:#d9edf7 !important;
    color:#31708f;
}

JavaScript

/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    var filter = $('input[name=RadioGroup1]:checked').data('course'),
        course = aData[3];
    return course == filter || filter == "*";
});
$(document).ready(function () {
    /* Initialise datatables */
    var oTable = $('#example').dataTable({

        "ajax": {
            url: "https://raw.githubusercontent.com/iecwebmast/datatables/058aa786845aedce5f00f8d049836462e9171d95/data/coursedata.json",
            caption: "caption",
            dataSrc: "data"
        },
            "initComplete": function (settings, json) {
            $('<caption/>').html(json.caption).prependTo('#example');
            var btnClear = $('<button id="clearsearch" class="btnClearDataTableFilter btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>');
            $('.dataTables_filter').prepend(btnClear);
            $('.btnClearDataTableFilter').click(function () { 
                oTable.search( '' ).draw();
            });               
        },
            "columnDefs": [{
            "visible": false,
                "targets": [0, 3]
        }, {
            "bSortable": false,
                "aTargets": [0, 1, 2, 3, 4, 5, 6, 7]
        }, {
            className: "centerit",
                "targets": [4, 5]
        }, {
            className: "nobreak",
                "targets": [7]
        },

        ],
            "order": [
            [0, 'asc']
        ],
            "bPaginate": false,
            "iDisplayLength": 100,
            "bLengthChange": false,
            "oSearch": {
            "bSmart": false
        },
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var sStarIcon;
            var sHighlightam;
            var sHighlightpm;
            var sAttend;

            if (aData[2] == "Astronomy" && aData[3] ==...