JSFiddle - React, Tailwind, and code Playground

by Rich Bragg

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 2015",
    "Brand S",
    "3",
    "$29.97",
    "$1.77",
    "$8.46",
    "$19.74"
  ],
  [
    "December 2014",
    "Brand S",
    "7",
    "$69.93",
    "$2.73",
    "$20.16",
    "$47.04"
  ],
  [
    "September 2014",
    "Brand S",
    "3",
    "$29.97",
    "$1.44",
    "$8.55",
    "$19.98"
  ],
  [
    "May 2014",
    "Brand C",
    "1",
    "$15.99",
    "$0.60",
    "$4.62",
    "$10.77"
  ],
  [
    "April 2015",
    "Brand S",
    "5",
    "$89.95",
    "$24.55",
    "$19.62",
    "$45.78"
  ],
  [
    "December 2014",
    "Brand C",
    "6",
    "$95.94",
    "$3.80",
    "$27.65",
    "$64.49"
  ]
];


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