JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/buttons/2.3.4/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />

<link href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.13.4/b-2.3.6/b-colvis-2.3.6/b-html5-2.3.6/b-print-2.3.6/r-2.4.1/sp-2.1.2/datatables.min.js"></script>
        
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="dtprint" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th class="sum">Salary</th>
            <th class="sum">Bonus</th>
          </tr>
        </thead>
        <tfoot>
         <tr>
            <th colspan="5"></th>
            <th></th>
            <th></th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>3,120</td><td>1,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>5,300</td><td>1,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>4,800</td><td>1,800</td>
          </tr> 
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
      ...

JavaScript

var dtprint;

$(function() {

          // Remove the formatting to get integer data for summation
            formatMoney.maxDecLength = 3; //Set to Infinity o.s. to disable it
            function formatMoney(a) {
                var nums = a.toString().split(/[,\.]/);
                var ret = [nums.slice(0, nums.length - 1).join("")];
                if (nums.length < 2) return +nums[0];
                ret.push(nums[nums.length - 1]);
                return +(ret.join(nums[nums.length - 1].length < formatMoney.maxDecLength ? "." : ""));
            }

	dtprint = $('#dtprint').DataTable( {
      "iDisplayLength" : 50,
      dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                footer: true,
                title: 'FOooter print',
                text: 'Print',
                exportOptions: {
                    columns: ':visible',
                },
                customize: function ( win ) {
                    $(win.document.body).css( 'font-size', '10px' );
                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'table', 'inherit' );
                }                
            },                 

        ],
       
       footerCallback: function(row, data, start, end, display) {
        var api = this.api();
        var footer = $("#dtprint").find('tfoot');

        // var footer = $(this).append('<th></th><th></th>');
        this.api().columns().every(function () {
            var column = this;
            if ($(column.header()).hasClass('sum')) { 
                  var sum = this
                    .data()
                    .reduce( function(a, b) {
                      var x = formatMoney(a)||0;
                      var y = formatMoney(b)||0;
              
                      return x+y; 
                    });
                    
                    sum = new Intl.NumberFormat('en-US', { maximumSignificantDigits:...