JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<select id="columnFilter" multiple="multiple"></select>

<table id="myGrid">
 <thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
    <th>Col 6</th>
    <th>Col 7</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Value 1</td>
   <td>Value 2</td>
   <td>Value 3</td>
   <td>Value 4</td>
   <td>Value 5</td>
   <td>Value 6</td>
   <td>Value 7</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan="7">Footer</td>
  </tr>
 </tfoot>
</table>

CSS

#myGrid thead th {border:solid 1px #f00}
#myGrid tbody td {border:solid 1px #ff0}
#myGrid tfoot td {border:solid 1px #0ff}

JavaScript

// setup re-usable variables
var $myGrid = $('#myGrid'),
    $colFilter = $('#columnFilter'),
    optionElementTemplate = "<option value=\"{0}\">{0}</option>";    

// iterate the <th> tags to build the multi-select box
$('th', $myGrid).each(function() {
    // create a jquery object to append from the optionElementTemplate and the <th> text
    $colFilter.append($(optionElementTemplate.replace(/\{0\}/g, $(this).text())));
});

$colFilter.change(function() {
    // store count for footer
    var count = 0;
    
    // show all columns
    resetTable();
    
    // iterate over the select options for selected values
    $('option', this).each(function() {
        if(!$(this).attr("selected")) {
            count++;
            hideColumn($(this).index());
        }
    });
    
    // adjust the colspan
    adjustFooter($('option', this).length - count);
});

function resetTable() {
    $('#myGrid td, #myGrid th').show();
    $('#myGrid tfoot td').attr("colspan", $('#columnFilter option').length);
}

function hideColumn(index) {
    $('#myGrid thead th:eq(' + index + ')').hide();
    $('#myGrid tbody td:eq(' + index + ')').hide();
}

function adjustFooter(count) {
    $('#myGrid tfoot td').attr("colspan", count);
}