JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<table id="sales-report-data-table" class="data-table table-bordered" width="100%" border="1" >
  <tfoot>
    <tr>
      <th colspan="2">Totals</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>
</table>

JavaScript

var columns = [
  { "title": "Month" },
  { "title": "Brand" },
  { "title": "Number Sold" },
  { "title": "Total Amount Paid" },
  { "title": "Transaction Fees" },
  { "title": "Platform Fees" },
  { "title": "Creator Profit" }
];
var data = [
  [
    "September 2014",
    "Brand C",
    "1",
    "$15.99",
    "$0.60",
    "$4.62",
    "$10.77"
  ],
  [
    "September 2014",
    "Brand C",
    "1",
    "$15.99",
    "$0.60",
    "$4.62",
    "$10.77"
  ]
];


function getValue(i) {
  return typeof i === "string" ? i.replace(/[\$,]/g, "") * 1.0 : typeof i === "number" ? i : 0;
}
function toUsd(value) {
  return Math.max(0,(Math.round(100 * value) / 100.0)).toFixed(2);
}
function toUsdString(value) {
  return "$" + toUsd(value);
}
var callback = function(row, data, start, end, display) {
  var api = this.api();
  var totalNumberSold = api.column(2).data()
  .reduce(function(a, b) { return a + getValue(b.num_sold); }, 0);
  var totalAmountPaid = api.column(3).data()
  .reduce(function(a, b) { return a + getValue(b); }, 0);
  var totalTransactionFees = api.column(4).data()
  .reduce(function(a, b) { return a + getValue(b); }, 0);
  var totalCKProfit = api.column(5).data()
  .reduce(function(a, b) { return a + getValue(b); }, 0);
  var totalCreatorProfit = api.column(6).data()
  .reduce(function(a, b) { return a + getValue(b); }, 0);
  $(api.column(2).footer()).html(totalNumberSold);
  $(api.column(3).footer()).html(toUsdString(totalAmountPaid));
  $(api.column(4).footer()).html(toUsdString(totalTransactionFees));
  $(api.column(5).footer()).html(toUsdString(totalCKProfit));
  $(api.column(6).footer()).html(toUsdString(totalCreatorProfit));
};
$("#sales-report-data-table").DataTable({
  "dom": "<'row'fr>t<'row'i>",
  "columns": columns,
  "data": data,
  "footerCallback": callback,
  "scrollX": true,
  "scrollY": '100px',
  "scrollCollapse": true
});