RioTable

RioTable (Riot+Table) Is a flexible HTML component to generate tables with riot.js lib from a JSON source

Launch RioTable Demo ...

You can use this HTML tag in your common html files

The simplest sample

    <rtable ongetdata="getJSON"></rtable>

This is a simple definition of one table that renders all JSON data returned by the callback function getJSON. Of course we can retrieve JSON data from an AJAX method

    function getJSON(){
      return [
    		 {id:101, city:'New York', flag:'ny.png'},
    		 {id:202, city:'Berlin', flag:'be.png'},
    		 {id:205, city:'Madrid', flag:'md.png'}
    		 ]
    }

Result:

The columns

We can specify which columns to render from JSON data

    <rtable ongetdata="getJSON">
      <rcol name="id"/>
      <rcol name="city"/>
    </rtable>   

Result:

Some basic options

Setting an id or a CSS class (for example to render table as BootStrap table), and the width of any column is so simple:

    <rtable ongetdata="getJSON" id="myrtable" class="table">
      <rcol name="id" width="20px"/>
      <rcol name="city"/>
    </rtable>   

Formating data

It's very common to include our custom HTML tags inside our rendered cell like bold text, links, images, html snippets ...

As easy as:

    <rtable ongetdata="getJSON" id="myrtable" class="table">
      <rcol name="id" width="20px">  <b>{id}</b> </rcol>
      <rcol name="city"/> <a href="details/?city={id}">{city}</a> </rcol>
	  <rcol name="flag"/> <img src="img/{flag}" /> </rcol>
    </rtable>   

Result:

Calling RioTable Methods

For example we can add new data to our table when a button is clicked.

    <button onclick="addNewData()">Change Table</button>
    
	<script>
		function addNewData(){
			var mytable = document.getElementById('myrtable');
			mytable.Load( [{id:255, city:'Paris', flag:'pa.png'}] );
		}
	</script>