JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/colvis/1.1.0/css/dataTables.colVis.min.css">
<script src="//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.js"></script>
<table id="storages"></table>

JavaScript

var dataSet = [{
    name: "storage101",
    size: 492
}, {
    name: "storage102",
    size: 742
}, {
    name: "storage103",
    size: 423
}]

$.extend($.fn.dataTable.defaults, {
    sDom: '<"top"i>rCt<"bottom"flp><"clear">'
});

$("#storages").dataTable({
    data: dataSet,
    aoColumns: [{
        title: "Name",
        mData: "name"
    }, {
        title: "Size",
        mData: "size"
    }],
    oLanguage: {
        sEmptyTable: "No logs"
    },
    fnFooterCallback: function (nRow, aaData, iStart, iEnd, aiDisplay) {
        var table = this;
        var api = table.api();
        var size = 0;
        aaData.forEach(function (x) {
            size += (x['size']);
        });
        // I need a footer in my table before doing this, what is the smartest way to add the footer?
        var maxColumnLength = table.find('tr').get().reduce(function (a, b) {
            return a.cells.length > b.cells.length;
        }).cells.length;
        var tfoot = this.find('tfoot').length ? this.find('tfoot') : $('<tfoot>', {
            'html': '<tr><td class="result" colspan="' + size + '"></td></tr>'
        }).insertBefore($(this).find('tbody'));
        tfoot.find('td.result').text(size);
    }
});