riot-table

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot+compiler.min.js"></script>
<main class="main"></main>

<script type="riot/tag">
 <tabla class="tabla">
    <table>
    <thead >
        <tr >
            <th each={cab in header } 
                class={hidde_column:ocultar.indexOf(cab.id)>=0  } >
                {cab.nombre}
            </th>
        </tr>
      </thead> 
      <tbody>
          <tr each={cab in datos }>
              <td each={ name,value in cab} 
                  class={hidde_column:ocultar.indexOf(name)>=0  }>
                  {value}
              </td>
          </tr>
      </tbody>
    </table>     
    <style>
        .tabla {
        display:block;
            width:100%;
            height:100%;
            overflow:auto;
        }
        
        .hidde_column{display:none}
        .tabla table{
            width:100%;
        }

        .tabla  th{
           background: #eee;
        }
        .tabla   td {
            background: #white;
        }
        
        .tabla  td + td {
          border-left:1px solid #eee;
        }
        .tabla   td, .tabla  th {
          border-bottom:1px solid #eee;
          color: #000;
          padding: 10px 25px;
        }
     </style>
     
     var self=this;
     this.header = [
     {"id":"id","nombre":"id_usu", "tipo":"string","ocultar":true},
     {"id":"nombre","nombre":"nombre", "tipo":"string"},
     {"id":"edad","nombre":"edad", "tipo":"number"},
     {"id":"fec_nac","nombre":"fecha nacimiento", "tipo":"date"}]
     
     this.ocultar=[];
     for(cab in this.header){
         if('ocultar' in this.header[cab]) 
             this.ocultar.push(this.header[cab].id);
     }
     
     this.datos=[{"id":1,"nombre":"Antonio","edad":23,"fec_nac":1427284800000},
     {"id":1,"nombre":"Antonio","edad":23,"fec_nac":1427284800000},
     {"id":1,"nombre":"Antonio","edad":23,"fec_nac":1427284800000},]
     
     this.on('mount', function() {
       ...

CSS

html, body{
  margin:0;
  padding:0;
  height:100%;
    width:100%;
}

JavaScript

riot.mount("main","tabla");