JSFiddle - React, Tailwind, and code Playground

by glenderson

HTML

<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/autofill/2.0.0/js/dataTables.autoFill.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/autofill/2.0.0/css/autoFill.dataTables.min.css">
<table width="100%" String class="display nowrap" String id="example" String cellspacing="0" String>
    <thead>
        <tr>
            <th>Group</td>
                <th>Value</td>
                    <th>Percent</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Total</th>
            <th>0</th>
            <th>Of Shown</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>A</td>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td>A</td>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <td>B</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>B</td>
            <td>4</td>
            <td>0</td>
        </tr>
        <tr>
            <td>B</td>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>B</td>
            <td>6</td>
            <td>0</td>
        </tr>
        <tr>
            <td>B</td>
            <td>7</td>
            <td>0</td>
        </tr>
        <tr>
            <td>C</td>
            <td>8</td>
            <td>0</td>
        </tr>
        <tr>
            <td>C</td>
            <td>9</td>
            <td>0</td>
        </tr>
        <tr>
            <td>C</td>
            <td>10</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function () {

    $('#example').DataTable({
        "footerCallback": function (row, data, start, end, display) {
            var api = this.api(),
                data;

            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };

            // Total over this page
            pageTotal = api.column(1, {
                page: 'current'
            })
                .data()
                .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);

            // Update footer
            $(api.column(1).footer()).html(pageTotal)

            table = $("#example").DataTable();
            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                var d = this.data();
                d[2] = (d[1] / pageTotal * 100).toFixed(2) +"%";
				this.data(d);
            });
this.data().draw;
        }
    });
});