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 id="demo">
    <div id="gradestoggle" class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active" id="btn1">       
            <input type="radio" checked="checked" name="RadioGroup1" id="showpass" class="grade-check" data-grade="pass" />Passing</label>
        <label class="btn btn-default" id="btn2">
            <input type="radio" name="RadioGroup1" id="showall" class="grade-check" data-grade="*" />All students</label>
    </div>   
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>School</th>
                <th>Icon</th>
                <th>Student</th>
                <th>Subject</th>
                <th>Grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>School 1</td>
                <td><span></span>

                </td>
                <td>Student 1</td>
                <td>astronomy</td>
                <td>fail</td>
            </tr>
            <tr>
                <td>School 1</td>
                <td><span></span>

                </td>
                <td>Student 2</td>
                <td>theater</td>
                <td>fail</td>
            </tr>
            <tr>
                <td>School 1</td>
                <td><span></span>

                </td>
                <td>Student 3</td>
                <td>astronomy</td>
   ...

CSS

body {
    font-size: 140%;
}
/* 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;}

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;  
}
.passed {color:#0194CB !important;}
.failed {color:#ddd !important;}
.info{
    background-color: #d9edf7;
    color: #31708f;
    background-image: linear-gradient(to bottom, #d9edf7 0px, #b9def0 100%);
    background-repeat: repeat-x;
    border-color: #9acfea;
}

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('grade'),
        grade = aData[4];
    return grade == filter || filter == "*";
});


$(function () {
    /* Initialise datatables */
    var oTable = $('#example').dataTable({
		"columnDefs": [
            { "visible": false, "targets": 0 },
			{ "bSortable": false, "aTargets": [ 0, 1, 2, 3, 4  ] }
        ],
		"order": [[ 0, 'asc' ]],
        "bPaginate": false,
        "iDisplayLength": 100,
        "bLengthChange": false,
		"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
			var sStarIcon;
            var sHighlight;
			if ( aData[3] == "astronomy" && aData[4] == "pass" ){
				sStarIcon = "passed glyphicon glyphicon-star"}	
			else if ( aData[3] == "astronomy" && aData[4] == "fail" ){
				sStarIcon = "failed glyphicon glyphicon-star-empty"}	
			else if ( aData[3] == "theater" && aData[4] == "pass" ){
				sStarIcon = "passed glyphicon glyphicon-heart"}	
			else if ( aData[3] == "theater" && aData[4] == "fail" ){
				sStarIcon = "failed glyphicon glyphicon-heart-empty"}
            if ( aData[4] == "pass"){
              sHighlight = "info"}
			else {sHighlight = ""} 
            $('td:eq(0) span', nRow).addClass( sStarIcon );
            $('td:eq(3)', nRow).addClass( sHighlight );
			;
			return nRow;
		},
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="4">'+group+'</td></tr>'
                    ); 
                    last = group;
                }
            } );
  ...