JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<body>
    <table id="projectsList" class="display tableList" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<th>No.</th>
				<th>Project</th>
				<th>Project Type</th>
				<th>Project In-Charge</th>
				<th>Item A</th>
				<th>Item B</th>
                <th>Item C</th>
                <th>Item D</th>
                <th>Item E</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>No.</th>
				<th>Project</th>
				<th>Project Type</th>
				<th>Project In-Charge</th>
				<th>Item A</th>
				<th>Item B</th>
                <th>Item C</th>
                <th>Item D</th>
                <th>Item E</th>
			</tr>
		</tfoot>
		<tbody>
				<tr>
					<td></td>
					<td>Project 01</td>
					<td>Development Stage</td>
					<td>Supervisor 01</td>
                    <td>3</td>
                    <td>10</td>
                    <td>6</td>
                    <td>22</td>
                    <td>15</td>
				</tr>
            <tr>
					<td></td>
					<td>Project 02</td>
					<td>Development Stage</td>
					<td>Supervisor 02</td>
                    <td>2</td>
                    <td>15</td>
                    <td>5</td>
                    <td>18</td>
                    <td>10</td>
			</tr>
            <tr>
					<td></td>
					<td>Project 03</td>
					<td>Product Stage</td>
					<td>Supervisor 01</td>
                    <td>8</td>
                    <td>25</td>
                    <td>10</td>
                    <td>20</td>
                    <td>15</td>
			</tr>
            <tr>
					<td></td>
					<td>Project 04</td>
					<td>Marketing Stage</td>
					<td>Supervisor 02</td>
                    <td>5</td>
                    <td>15</td>
                    <td>7</td>
                    <td>13</td>
                    <td>9</td>
			</tr>
            <tr>
					<td></td>
					<td>Project...

CSS

div.dataTables_wrapper {
	margin: 0 auto;
	width: 100%;
}

.tableList {
	width: 100%;
	font-family: Georgia, serif;
	font-size: 13px;
	text-shadow: none !important;
}

.tableList thead tr th, .tableList tfoot tr th {
	vertical-align: middle !important;
	white-space: nowrap;
}

.tableList tbody tr.groupTR td.groupTD {
	background-color: #999;
	padding: 5px 10px !important;
	border: groove medium #999;
	font-weight: bold;
    text-align: left;
}

.tableList tbody tr.groupTR td.groupTD .groupInfo {
	padding-left: 10px;
	font-size: 12px;
	color: blue;
	font-weight: normal;	
}

.tableList tbody tr td {
	padding: 0px 10px !important;
	color: black !important;
    text-align: center;
	vertical-align: middle !important;
	white-space: nowrap;
}

.tableList tbody tr.odd td {
	background-color: #d0d0d0;
}

.tableList tbody tr.even td {
	background-color: #e0e0e0;
}

.tableList tbody tr.selectedRow td {
	background-color: #5CFFFF;
	opacity: 0.8;
}

JavaScript

$(document).ready(function() {
    var $tableEle = $('#projectsList');
    var groupCol = 3;
    
    //Initiate DataTable
    $tableList = $tableEle.DataTable({
        "dom"		    : "<'clear'><'H'r>t<'F'>",
        "autoWidth"     : true,
        "retrieve"		: true,
        "orderFixed"	: [[groupCol, 'asc']],
        "columnDefs"	: [
            {"orderable": false, "targets": [0]},
            {"visible": false, "targets": [2, 3]}
        ],
        "drawCallback": function(settings) {
            var that = this;
			if(settings.bSorted || settings.bFiltered) {
				this.$('td:first-child', {"filter":"applied"}).each(function(i) {
					that.fnUpdate(i+1, this.parentNode, 0, false, false);
				});
			}
            
            var api = this.api();
            var rows = api.rows({page:'current'}).nodes();
            var rowsData = api.rows({page:'current'}).data();
            
            var last = null;
            var groupTotal = [];
            
            api.column(groupCol, {page:'current'}).data().each(function(group, i) {
                if(last !== group) {
                    $(rows).eq(i).before("<tr class='groupTR'><td colspan='100%' class='groupTD'>" + group + "</td></tr>");
                    last = group;
                }
            });
        }
    });
});