JSFiddle - React, Tailwind, and code Playground

by Eufragio

HTML

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/rowgroup/1.0.4/css/rowGroup.dataTables.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.0.4/js/dataTables.rowGroup.min.js"></script>

<script src="//cdn.datatables.net/plug-ins/1.10.19/dataRender/intl.js"></script>


<div class="container">
  <div class="row">
    <div class="col-xs-12">

      <table id="example" class="table table-bordered table-hover dt-responsive display" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>Total:</th>
            <th></th>

          </tr>
        </tfoot>
        <tbody>

          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>170,750</td>
          </tr>


          <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>162,700</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>372,000</td>
          </tr>
          <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
           ...

JavaScript

$(document).ready(function() {
   var table = $('#example').DataTable({

     //Total General

     "footerCallback": function(row, data, start, end, display) {
       var api = this.api(),
         data;

       // Remove the formatting to get integer data for summation
       var intVal = function(i) {
         return typeof i === 'string' ?
           i.replace(/[\L,]/g, '') * 1 :
           typeof i === 'number' ?
           i : 0;
       };

       // Total over all pages // Total en todas las páginas
       total = api
         .column(5)
         .data()
         .reduce(function(a, b) {
           return intVal(a) + intVal(b);
         }, 0);

       // Total over this page // Total sobre esta pagina
       pageTotal = api
         .column(5, {
           page: 'current'
         })
         .data()
         .reduce(function(a, b) {
           return intVal(a) + intVal(b);
         }, 0);

       // Update footer //Pie de página de actualización
       $(api.column([5, 3]).footer()).html(
         // '' + pageTotal + ' ( L' + total + ' total)'
         //'' + total.toFixed(2)
         '' + total

       );
       // Total over all pages // Total en todas las páginas
       total = api
         .column(3)
         .data()
         .reduce(function(a, b) {
           return intVal(a) + intVal(b);
         }, 0);

       // Total over this page // Total sobre esta pagina
       pageTotal = api
         .column(3, {
           page: 'current'
         })
         .data()
         .reduce(function(a, b) {
           return intVal(a) + intVal(b);
         }, 0);

       // Update footer //Pie de página de actualización
       $(api.column(3).footer()).html(
         // '' + pageTotal + ' ( L' + total + ' total)'
         //'' + total.toFixed(2)
         '' + total

       );
     },

     "columnDefs": [{
       "visible": false,
       "targets": 2
     }],
     "order": [
       [2, 'asc']
     ],
     "displayLength": 25,
     "drawCallback":...