JSFiddle - React, Tailwind, and code Playground

by Yuriy Tarabanko

HTML

<div id="togglers"></div>
<table id="table">
    <tr>
        <th class="Title">ID</th>
        <th class="Title">Color</th>
        <th class="Title">Number</th>
    </tr>
    <tr>
        <td>1</td>
        <td>#990000</td>
        <td>C001</td>
    </tr>
    <tr>
        <td>2</td>
        <td>#009900</td>
        <td>C002</td>
    </tr>
    <tr>
        <td>3</td>
        <td>#FFFFFF</td>
        <td>C003</td>
    </tr>
    <tr>
        <td>4</td>
        <td>#000000</td>
        <td>C004</td>
    </tr>
</table>

CSS

.toggler {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid black;
    border-radius: 2px;
    cursor: pointer;
}

.toggler.pressed {
    background-color: #BBB;
}

JavaScript

$(function() {
    var togglers = $('#togglers'),
        addToggler = function(idx, text) {
            togglers.append('<span class="toggler" data-id="' + idx + '">' + text + '</span>');    
        },
        table = $('#table'),
        columns = 0;
    
    (function generateStyleSheet(len){
        var styles = [], i = 0;
        
        for(; i < len; i++) {
            styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ;
        }
        
        $('<style>' + styles.join('\n') + '</style>').appendTo(document.body);
    }(100))
    
    
    togglers.on('click', '.toggler', function(e){
        var id = $(e.target).toggleClass('pressed').data('id');
        table.toggleClass('hide-' + id);
    });
    
    table.find('th').each(function(idx, header){
        header = $(header);
        addToggler(idx, header.text());
        header.addClass('column-' + idx);
        columns++;
    });
    
    table.find('td').each(function(idx, td) {
        $(td).addClass('column-' + (idx%columns));
    })
    
})