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>username</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 class="min-tablet-p">Room</th>
            </tr>
        </thead>
        <tbody>
           ...

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({
        "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] == "yes") {
                sStarIcon = "glyphicon glyphicon-star"
            } else if (aData[2] == "Astronomy" && aData[3] == "no") {
                sStarIcon = "glyphicon glyphicon-star-empty"
            } else if (aData[2] == "Theater" && aData[3] == "yes") {
                sStarIcon = "glyphicon glyphicon-heart"
            } else if (aData[2] == "Theater" && aData[3] == "no") {
                sStarIcon = "glyphicon glyphicon-heart-empty"
            } else if (aData[2] == "Art") {
                sStarIcon = "glyphicon glyphicon-picture"
            } else if (aData[2] == "Botany") {
                sStarIcon = "glyphicon glyphicon-leaf"
            } else if (aData[2] == "Finance") {
                sStarIcon =...