JSFiddle - React, Tailwind, and code Playground

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>

CSS

.footer {
    text-align:right;
    font-weight:bold;
    padding:8px 10px;
}

.align-right {
    text-align:right;
}

JavaScript

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

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

$("#storages").dataTable({
    data: dataSet,
    columns: [
        {title: "Name", data: "name"},
        {title: "Size", data: "size", className: "align-right"}
    ],
    oLanguage: {sEmptyTable: "No logs"},
    fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) {
        var api = this.api();
        var size = 0;
        aaData.forEach(function(x) {
            size += (x['size']);
        });
        $('.footer').html(size);
    }
});