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>
...

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) {
               ...