riot-table

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.1.0/riot+compiler.js"></script>
<script type="riot/tag">
<riot-table>
	<table>
  	<thead>
    	<tr>
      	<th each={col in opts.columnas}> {col.id} </th>
      </tr>
    </thead>
    <tbody onmouseDown={mouseDown}>
    	<tr each={dia,i in opts.dias}>
      	<td each={col,j in columnas} class="{('r'+i)+' '+ ('l'+j)}"> {col.values[i]} </td>
      </tr>
    </tbody>
  </table>
  
  this.columnas=opts.columnas;
	this.mouseDown=false;
   mouseDown(e){
   	console.log("mdown",e.target)
    e.target.classList.add('selected');
   }
</riot-table>
</script>

<riot-table></riot-table>

CSS

table{
  border-collapse: collapse;
}

table td,table th{
  border:1px solid grey;
  padding:8px;
}

table td.selected{
  background:red;
}

table td:hover{
  background:rgba(0,0,0,0.3);
}

JavaScript

window.onload = function() {
  var datosTabla={
  	columnas:[
	{id:"c1", values: [1,2,3,4,5]},
	{id:"c2", values: [6,7,8,9,10]},
	{id:"c3", values: [11,12,13,14,15]},
	{id:"c4", values: [11,12,13,14,15]},
	{id:"c5", values: [11,12,13,14,15]}
    ],
    dias:[1,2,3,4,5]
  };
  riot.compile(function() {
    riotRoot = riot.mount('riot-table',datosTabla)[0];
  })
}