JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                 <th>Salary2</th>
                 <th>Type</th>
            </tr>
        </thead>
        <tbody>
           
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>234.500</td>
                <td>10</td>
                 <td>1</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>163.500</td>
                 <td>10</td>
                  <td>0</td>
            </tr>
             <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>145.600</td>
                 <td>10</td>
                  <td>0</td>
            </tr>
             <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>125.250</td>
                <td>10</td>
                 <td>1</td>
            </tr>
            
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New...

CSS

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}
tr.sum{
  background-color:rgb(86, 241, 114);
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    "columnDefs": [{
      "visible": false,
      "targets": [2, 7]
    }],
    "order": [
      [2, 'asc']
    ],
    "displayLength": 25,
    "drawCallback": function(settings) {
      var api = this.api();
      var rows = api.rows({
        page: 'current'
      }).nodes();
      var last = null;
      var subTotal = new Array();
      var groupID = -1;
      var aData = new Array();
      var index = 0;

      api.column(2, {
        page: 'current'
      }).data().each(function(group, i) {
        if (last !== group) {
          $(rows).eq(i).before(
            '<tr class="group"><td colspan="6">' + group + '</td>'
          );
          last = group;
        }
      });

      api.column(2, {
        page: 'current'
      }).data().each(function(group, i) {
        var vals = api.row(api.row($(rows).eq(i)).index()).data();
        var salary = vals[5] ? parseFloat(vals[5]) : 0;
        var salary2 = vals[6] ? parseFloat(vals[6]) : 0;
        var type = vals[7] ? parseFloat(vals[7]) : 0;

        if (typeof aData[group] == 'undefined') {
          aData[group] = new Array();
          aData[group].rows = [];
          aData[group].salary = 0;
          aData[group].salary2 = 0;
        }

        aData[group].rows.push(i);
        aData[group].salary += salary;
        aData[group].salary2 += (type === 0 ? -salary2 : salary2);
      });

      var idx = 0;

      for (var office in aData) {
        idx = Math.max.apply(Math, aData[office].rows);

        var sum = aData[office].salary;
        var sum2 = aData[office].salary2;

        $(rows).eq(idx).after(
          '<tr class="sum"><td colspan="4">Total</td>' +
          '<td>' + sum.toFixed(2) + '</td><td>' + sum2.toFixed(2) + '</td></tr>'
        );
      }
    }
  });
});