JSFiddle - React, Tailwind, and code Playground

HTML

<table class="editable_table">
 <thead>
  <tr>
    <th>first</th>
    <th>second</th>
    <th>third</th>
    <th>fourth</th>
    <th>fifth</th>
    <th>sixth</th>
    <th>seventh</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
   <td>6</td>
   <td>7</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td class="footer" colspan="7">This is the footer</td>
  </tr>
 </tfoot>
</table>
<select multiple="multiple">
 <option value="1" selected="selected">first</option>
 <option value="2" selected="selected">second</option>
 <option value="3" selected="selected">third</option>
 <option value="4" selected="selected">fourth</option>
 <option value="5" selected="selected">fifth</option>
 <option value="6" selected="selected">sixth</option>
 <option value="7" selected="selected">seventh</option>
</select>

CSS

table td, table th {padding: 5px;}

JavaScript

function hideCol($table, myIndex){
    $table.find("tr").each(function(){
        $(this).find("th:eq("+myIndex+"), td:eq("+myIndex+")").not('.footer').hide();
    });
}

function showCol($table, myIndex){
    $table.find("tr").each(function(){
        $(this).find("th:eq("+myIndex+"), td:eq("+myIndex+")").not('.footer').show();
    });
}

$("select").change(function(){
    var $table = $(".editable_table"),
        cols = $(this).val();
    for (var i = 1; i <= $table.find("th").length; i++){
        if (cols.indexOf(i+'') === -1) {
            hideCol($table, i-1);
        } else {
            showCol($table, i-1);
        }
    }
    $table.find("tfoot td").attr('colspan', cols.length);
    //hideCols(i);
});