JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bad">
<table border=1 id="mytable"></table>
<span id="all" class="btn">All</span> <span id="add" class="btn">Add</span>
</div>

CSS

.bad{
        background:#c1c1c1;
    }
    table{
        
    }
    table thead{
    
    }
    .btn{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
    cursor:pointer;
}
.btn:hover{
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.btn:active{  /* el efecto click */
     color: #000;
    border-color: #444;
}

JavaScript

var mytable =  $('mytable');
        var thead = new Element('thead').inject(mytable);        
        var columnModel= [
            {header: 'Concepto', width:'5%', name:'concpeto'},
            {header: 'Activo', width:'30%', name:'activo'},
            {header: 'Pasivo', width:'15%', name:'pasivo'}
        ];
        var data=[
            {concpeto:'Hernai', activo:1, pasivo:0},
            {concpeto: 'Gonzalo', activo:1, pasivo:0},
            {concpeto: 'Che-ffy', activo:0, pasivo:1},
            {concpeto: 'Migue', activo:0, pasivo:1},
            {concpeto: 'Gonzo', activo:1, pasivo:0}
        ];
        $('all').addEvent('click', function(){
            var nrows = mytable.rows.length;
            var trHeader = new Element('tr', {}).inject(thead);                
            var createThHeader = function(column, index){
                var th = new Element('th', {}).inject(trHeader); 
                if(column.width){
                    th.setStyle('width', column.width);
                }                                   
                var div = new Element('div', {
                    'text': column.header
                }).inject(th);            
            };                         
            columnModel.each(createThHeader, this);
            
            var tbody = new Element('tbody').inject(mytable);                
            var loadData = function(column, index){                
                var trRow = new Element('tr', {}).inject(tbody);                
                columnModel.each(function(e, index){
                    //alert(column[e.name]);
                    var td = new Element('td', {}).inject(trRow);
                    var div = new Element('div', {'text': column[e.name]}).inject(td);  
                    
                });                
            };
            data.each(loadData, this);            
            //alert(mytable+' '+ nrows);
        });