JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table class="cell-border" id="mediciones" width="100%">
						<thead>
              <tr>
								<th rowspan="2">CERT</th>
								<th rowspan="2" >TOTAL</th>
								<th colspan="2" >Vialidad</th>
								<th colspan="2" >Conservación</th>
							</tr>
							<tr>
               	<th>Vialidad (€)</th>
								<th>Vialidad (%)</th>
								<th>Conservación (€)</th>
								<th>Conservación (%)</th>
							</tr>
						</thead>
						<tbody id="tabla3">
              <tr height= "50px">
                  
									<td>Mayo</td>
									<td>2017</td>
									<td>1508.26</td>
									<td></td>
									<td></td>
									<td>1508.26</td>
									<td>100</td>
							</tr>
							<tr height= "50px">
                  
									<td>Julio</td>
									<td>2017</td>
									<td>2138.26</td>
									<td>2138.26</td>
									<td>100</td>
									<td></td>
									<td></td>
							</tr>
              <tr height= "50px">
									
                  <td>Agosto</td>
									<td>2017</td>
									<td>456.36</td>
									<td>106.50</td>
									<td>23.34</td>
									<td>349.86</td>
									<td>76.66</td>
							</tr>
            </tbody>
					</table>

CSS

.group{
        background-color:#333!important;
        font-size:15px;
        color:#fff!important;
        opacity:0.7;
    }

JavaScript

$(document).ready(function() {
	var table = $('#mediciones').DataTable({
		"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 (año, i) {
				if (last !== año) {
					$(rows).eq(i).before(
						$("<tr></tr>", {"class": "group", "data-id": año}).append($("<td></td>", {"class": "año", "text": "AÑO "+año})).append($("<td></td>", {"id": año+"_total", "class": "noCount", "text": "0.00"}))
						.append($("<td></td>", {"id": año+"_vial", "class": "noCount", "text": "0.00"})).append($("<td></td>", {"id": año+"_perc_vial", "class": "noCount", "text": "0.00"}))
						.append($("<td></td>", {"id": año+"_ord", "class": "noCount", "text": "0.00"})).append($("<td></td>", {"id": año+"_perc_ord", "class": "noCount", "text": "0.00"})).prop('outerHTML')
					);
					last = año;
				}
				val = api.row(api.row($(rows).eq(i)).index()).data();
				
				$("#"+año+"_total").text(parseFloat($("#"+año+"_total").text()) + parseFloat(val[2]));
				
				if (val[3]=="") {
					$("#"+año+"_vial").text(parseFloat($("#"+año+"_vial").text()) + parseFloat("0.00"));
				} else {
					$("#"+año+"_vial").text(parseFloat($("#"+año+"_vial").text()) + parseFloat(val[3]));
				}
				$("#"+año+"_perc_vial").text((parseFloat($("#"+año+"_vial").text())*100/$("#"+año+"_total").text()).toFixed(2));
				
				if (val[5]=="") {
					$("#"+año+"_ord").text(parseFloat($("#"+año+"_ord").text()) + parseFloat("0.00"));
				} else {
					$("#"+año+"_ord").text(parseFloat($("#"+año+"_ord").text()) + parseFloat(val[5]));
				}
				$("#"+año+"_perc_ord").text((parseFloat($("#"+año+"_ord").text())*100/$("#"+año+"_total").text()).toFixed(2));
			});
		},
				
  });
	    
  
});