JSFiddle - React, Tailwind, and code Playground

by luizz

HTML

<table>
            <thead>
                <tr>
                    <td>Data</td>
                    <td>TĂ­tulo</td>
                    <td class="hide">Views</td>
                    <td class="hide">Views2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td class="hide">3</td>
                    <td class="hide">1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>2</td>
                    <td class="hide">3</td>
                    <td class="hide">2</td>
                </tr>
                <tr>
                    
                    <td>3</td>
                    <td>3</td>
                    <td class="hide">3</td>
                    <td class="hide">3</td>
                </tr>

            </tbody>
        </table>

CSS

.hide{
                display:none;   
            }

            table{
                border-bottom: 7px solid #9BAFF1;
                border-collapse: collapse;
                border-top: 7px solid #9BAFF1;
                font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
                font-size: 12px;
                margin: 20px;
                text-align: center;
                width: 480px;
            }

            table th {
                background: none repeat scroll 0 0 #E8EDFF;
                border-left: 1px solid #9BAFF1;
                border-right: 1px solid #9BAFF1;
                color: #003399;
                font-size: 13px;
                font-weight: normal;
                padding: 8px;
            }

            table td {
                background: none repeat scroll 0 0 #E8EDFF;
                border-left: 1px solid #AABCFE;
                border-right: 1px solid #AABCFE;
                color: #666699;
                padding: 8px;
            }

            ul#cols{
                display: block;
                list-style: none outside none;
                margin: 0 0 0 -2px;
                padding: 2px;
                position: absolute;
                background: none repeat scroll 0 0 #E8EDFF;
                border: 1px solid #AABCFE;
                color: #666699;
            }
            
            ul#cols li{
                padding: 0 2px;
                margin: 2px 0;
            }

            ul#cols li input{
                float: left;
                margin: 0 2px;
            }

JavaScript

$.fn.colsTabela = function() {

                var tabela = this instanceof jQuery ? this : $(this);

                tabela.append('<ul id="cols"></ul>');
                
                elementos = {
                    show: $("thead", tabela),
                    cols: $("#cols", tabela).empty().hide()
                };
                
                elementos.cols.css({});
                
                elementos.show.bind('contextmenu', function(e){
                     var $this = $(this);
            
                    // disable actual context-menu
                    if(e.preventDefault)e.preventDefault();
                    if(e.stopImmediatePropagation)e.stopImmediatePropagation();
                    
                   // if (e.data.trigger != 'right' && e.originalEvent) {
                      //  return;
                    //}     
                    
                    if (elementos.cols.hasClass('show')) {

                        elementos.cols.empty().hide().removeClass('show');
                    } else {

                        elementos.cols.empty();

                        var tds = $this.find('td'),
                        checkbox = '';

                        tds.each(function(i) {
                            checkbox += '<li><input type=checkbox value=' + (i) + ' ' + ($(this).hasClass('hide') ? '' : 'checked') + '/>' + $(this).text() + '</li>';
                        });

                        elementos.cols.html(checkbox).find('input:checkbox').click(function(ee){
                            
                            var _value = this.value;
                            tabela.find('thead td').eq(_value).toggleClass('hide');

                            tabela.find('tbody tr').each(function() {
                                $(this).find('td').eq(_value).toggleClass('hide');
                            });
                            
                            ee.stopPropagation();
                       ...