JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<button id="toggle-table" data-toggle-class="hide">Toggle Table Visibility</button>
<button id="reset-visibility">Reset</button><br/>
<button id="toggle-col-1" data-toggle-class="no-col1">Col 1</button>
<button id="toggle-col-2" data-toggle-class="no-col2">Col 2</button>
<button id="toggle-col-3" data-toggle-class="no-col3">Col 3</button>
<button id="toggle-col-4" data-toggle-class="no-col4">Col 4</button>
<button id="toggle-col-5" data-toggle-class="no-col5">Col 5</button>
<button id="toggle-col-6" data-toggle-class="no-col6">Col 6</button>
<button id="toggle-col-7" data-toggle-class="no-col7">Col 7</button>
<button id="toggle-col-8" data-toggle-class="no-col8">Col 8</button>

<table id="test-table" class="no-col1 no-col2">
    <colgroup>
        <col class="col1"></col>
        <col class="col2"></col>
        <col class="col3"></col>
        <col class="col4"></col>
        <col class="col5"></col>
        <col class="col6"></col>
        <col class="col7"></col>
        <col class="col8"></col>
    </colgroup>
    <thead>
        <tr>
            <td class="col1">First</td>
            <td class="col2">Second</td>
            <td class="col3">Third</td>
            <td class="col4">Fourth</td>
            <td class="col5">Five</td>
            <td class="col6">Six</td>
            <td class="col7">Seven</td>
            <td class="col8">Eight</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col1">Loremipsumdolorsitamet,consecteturadipiscingelit.Prointemporenimidantemollisadipiscing</td>
            <td class="col2">Second Data</td>
            <td class="col3">Third Data</td>
            <td class="col4">Fourth Data</td>
            <td class="col5">Loremipsumdolorsitamet,consecteturadipiscingelit.Prointemporenimidantemollisadipiscing</td>
            <td class="col6">Sixth Data</td>
            <td class="col7">Sevent Data</td>
            <td class="col8">Eighth Data</td>
        </tr>
    </tbody>
</table>

CSS

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.hide { display: none;}

td {
    border: 1px solid black;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    padding: 10px;
}

.no-col1 .col1 { display: none; }
.no-col2 .col2 { display: none; }
.no-col3 .col3 { display: none; }
.no-col4 .col4 { display: none; }
.no-col5 .col5 { display: none; }
.no-col6 .col6 { display: none; }
.no-col7 .col7 { display: none; }
.no-col8 .col8 { display: none; }

JavaScript

var table = document.getElementById('test-table');
var colspan = 5;

var resetButton = document.getElementById('reset-visibility');
resetButton.onclick = function () {
    table.className = '';
};

document.onclick = toggleClassForButton;

function toggleClassForButton(e) {
    var clazz, target;
    
    if (e) {
        target = e.target;
    } else {
        target = window.event.srcElement;
    }
    
    clazz = target.getAttribute('data-toggle-class');
    
    if (!clazz) return;
    
    if (table.className.indexOf(clazz) != -1) {
        table.className = table.className.replace(clazz, '');
    } else {
        table.className += ' ' + clazz;
    }
    
    var classes = table.className;
    table.className = 'hide';
    table.className = classes;
}