Table

Constructor

new Table(obj) → {Object}

Examples

1 layout table (method chaining)



var output = new Html.table({class: 'my_table'})

//row 1
.row({'data-row': 'row-1'}).cells([
	['row 1 left column',{class: 'my_cell'}]
	,['row 1 right column',{class: 'my_cell'}]

//row 2
]).row({'data-row': 'row-2'}).cells([
	['row 2 left column',{class: 'my_cell'}]
	,['row 2 right column',{class: 'my_cell'}]
]).get();



document.write(output);



//the resulting HTML



<table class="my_table">
 <tbody>
  <tr data-row="row-1">
   <td class="my_cell">row 1 left column</td>
   <td class="my_cell">row 1 right column</td>
  </tr>
  <tr data-row="row-2">
   <td class="my_cell">row 2 left column</td>
   <td class="my_cell">row 2 right column</td>
  </tr>
 </tbody>
</table>

2 data structures 

// data usually taken from a database

var my_array = [
 {id:1, name: 'Thomas', 'email': 'thomas@mail.com'}
 ,{id: 2, name: 'Marco', 'email': 'marco@mail.com'}
 ,{id: 3, name: 'Luca', 'email': 'luca@mail.com'}
];



var table = Html.table({class: 'my_table'});


// heading
var tr = table.row({'data-row': 'heading'});

tr.cell('name',{class: 'my_cell_heading'});
tr.cell('email',{class: 'my_cell_heading'});


for(var i in my_array) {

 //create row
 var tr = table.row({'data-row': 'row-' + i});

 var obj = my_array[i];

 //create columns
 tr.cell(obj.name,{style: (obj.id != 1 ? '' : 'color:red'), class: 'my_cell'});
 tr.cell(obj.email,{class: 'my_cell'});

}



var output = table.get({output: 'html'});



document.write(output);


//the resulting HTML

<table class="my_table">
  <tbody>
    <tr data-row="heading">
      <td class="my_cell_heading">name</td>
      <td class="my_cell_heading">email</td>
    </tr>
    <tr data-row="row-0">
      <td class="my_cell" style="color:red">Thomas</td>
      <td class="my_cell" style="">thomas@mail.com</td>
    </tr>
    <tr data-row="row-1">
      <td class="my_cell" style="">Marco</td>
      <td class="my_cell" style="">marco@mail.com</td>
    </tr>
    <tr data-row="row-2">
      <td class="my_cell" style="">Luca</td>
      <td class="my_cell" style="">luca@mail.com</td>
    </tr>
  </tbody>
</table>