JSFiddle - React, Tailwind, and code Playground

by Eufragio

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/datatables.min.css" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
</head>
<body>
    <div class="container">
        <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>
 ...

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'Btirp',
    buttons: [{
    extend: 'csvHtml5',
    text: 'CSV',
    filename: 'csv_file',
    footer: true
    },
    {
    extend: 'excelHtml5',
    text: 'Excel',
    filename: 'excel_file',
    footer: true
    }],
      //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)
         ...