JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<table id="myTable">
<thead>
  <tr>
    <th>name</th>
    <th>balance</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th></th>
    <th></th>
  </tr>
</tfoot>
</table>

JavaScript

$(document).ready( function () {
    var table;
    table = $('#myTable').DataTable({
      "columnDefs": [
   			    {render: $.fn.dataTable.render.number( '', ',', 2, '' ), "targets": 1 }
  		],
      "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 1 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
 					console.log(typeof total, total.toLocaleString('de-DE')  );
            // Update footer
            $( api.column( 1 ).footer() ).html(  total.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2})  );
        }
    });
    
    table.rows.add( [[ "james", 100 ], ["ben", 75]] );
    table.draw();
} );