JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://mottie.github.io/tablesorter/dist/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<div>Visible column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column="2">Office</a> - <a class="toggle-vis" data-column="3">Salary</a> - <a class="toggle-vis" data-column="4">Bonus</a> - <a class="toggle-vis" data-column="5">Total</a></div>
<div>&nbsp;</div>
<div id="table-wrapper" class="wdtscroll" style="">
<table id="table_1" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
                <th>Bonus</th>
                <th id="nm" class="lastcolumn">Total</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
                <th>Bonus</th>
                <th>Total</th>
            </tr>
        </tfoot>
        <tbody class="display1">
            <tr class="row">
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td class="needcalculate">172</td>
                <td class="needcalculate">232</td>
                <td class="lastcolumn"></td>
            </tr>
            <tr class="row">
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td class="needcalculate">873</td>
                <td class="needcalculate">837</td>
                <td class="lastcolumn"></td>
            </tr>
   ...

CSS

.toggle-vis {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    cursor: pointer; 
    cursor: hand;
}

JavaScript

$('#table_1').dataTable({
        scrollY:250,
        "paging":true
    });

$(document).ready(function() {
  var x = setInterval(function(){
  $('#table_1 tbody tr').each(function(){
    var sum = 0;
    $(this).find('td.needcalculate').each(function(){
      sum += parseInt($(this).html());
    });
    $(this).find('td.lastcolumn').html(sum);
  });  
  },17);
  var f_nm = -1; // flag to toggle the sorting order
  $("th.lastcolumn").click(function(){
    f_nm *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_nm,n);
});
});

function sortTable(f,n){
    var rows =  $('#table_1').DataTable()
    .rows()
    .nodes();
    rows.sort(function(a, b) {
        var A = getVal(a);
        var B = getVal(b);
        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });
    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }
    $.each(rows, function(index, row) {
        $('#table_1').children('tbody').append(row);   
    });
}

$('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault(); 
        // Get the column API object
        var column =  $('#table_1').DataTable().column( $(this).attr('data-column') );
        // Toggle the visibility
        column.visible( ! column.visible() );
} );