JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/start/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables_themeroller.css">
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<body>
    <div class="container">
        <table class="stripe order-column" id="example">
            <thead>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 4.0</td>
                    <td>Win 95+</td>
                    <td>4</td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 5.0</td>
                    <td>Win 95+</td>
                    <td>5</td>
                    <td>C</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 5.5</td>
                    <td>Win 95+</td>
                    <td>5.5</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 6</td>
                    <td>Win 98+</td>
                    <td>6</td>
                    <td>A</td>
                </tr>
                <tr>
                    <td>Trident</td>
                    <td>Internet Explorer 7</td>
 ...

JavaScript

$("#example").DataTable({
    "scrollY": "400px",
    "scrollCollapse": true,
    "paging": false,
    
    "jQueryUI": true,
    "autoWidth": false,

    "columnDefs": [
        {
            "targets": 1,
            "visible": false
        }
    ],
    "drawCallback": function (settings) {
        var api = this.api();
        var rows = api.rows({ page: 'current' }).nodes();
        var last = null;

        api.column(1, { page: 'current' }).data().each(function (group, i) {
            if ( last !== group ) {
			    var thisRow = $(rows).eq( i ).before(
					'<tr class="group" style="background-color:yellow;"><td colspan="5">' + group + '</td></tr>'
				);

				var maxHeight = api.tables().settings()[0]['oScroll']['sY'].replace(/\D/g,'');
				var newHeight = $(api.tables().containers()[0]).find(".dataTables_scrollBody").height() + $(thisRow).height()
								
				if (newHeight < maxHeight) {
					$(api.tables().containers()[0]).find(".dataTables_scrollBody").height(newHeight)
				}

				last = group;
			}
        });
    }

});