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 id="example" class="stripe order-column">
<thead>
  <tr>
    <th >Col1</th>
    <th >Col2</th>
    <th >Col3</th>
    <th >Col4</th>
    <th >Col5</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Group1</td>
    <td>blabla</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
  </tr>

  <tr>
    <td>Group2</td>
    <td>blabla</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
  </tr>
  <tr>
    <td>Group2</td>
    <td>blabla</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
  </tr>
   <tr>
    <td>Group1</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
  </tr>
  <tr>
    <td>Group2</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
    <td>blalba</td>
  </tr>
    </tbody>
</table>
    </div>
</body>

JavaScript

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

    "columnDefs": [
        {
            "targets": 0,
            "visible": false
        }
    ],
    "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 ) {
			    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;
			}
        });
    }

});