Building the Table

You can build your cols() and rows() with a compact syntax.

  • ts.ui.get('#mytable', table => {
    	table.cols(['One', 'Two', 'Three']);
    	table.rows([
    		['A', 'D', 'G'],
    		['B', 'E', 'H'],
    		['C', 'F', 'I']
    	]);
    });
    

You can also declare columns as objects. The objects have a label property.

  • ts.ui.get('#example1', table => {
    	table.cols([
    		{label: 'One'},
    		{label: 'Two'},
    		{label: 'Three'}
    	]);
    });
    

This will come in handy when we need to assign extra properties to the columns. If we set the type property to ts-number, the text will be right-aligned (except in the first column).

  • ts.ui.get('#example2', table => {
    	table.cols([
    		{ label: 'Type' },
    		{ label: 'Value', type: 'ts-number'}
    	]);
    	table.rows([
    		['Random number', Math.random()]
    	]);
    });
    

We can also declare rows as objects with a list of cells. This syntax will allow us to mark the row as selected (you can read more about selection).

  • ts.ui.get('#example3', table => {
    	table.selectable().rows([
    		{ cells: ['A', 'D', 'G'], selected: true},
    		{ cells: ['B', 'E', 'H']},
    		{ cells: ['C', 'F', 'I']},
    	]);
    });
    

The individual cells can also be declared as objects if the displayed text should be different from the hidden value (which can be anything you like).

  • ts.ui.get('#example4', table => {
    	table.rows([
    		{
    			cells: [
    				{value: 1, text: 'One'},
    				{value: 2, text: 'Two'},
    				{value: 3, text: 'Three'}
    			]
    		}
    	]);
    });
    

You can update a single row whenever you like. Here with compact syntax.

  • ts.ui.get('#example5', table => {
    	table.rows([
    		['A', 'B', 'C'],
    		['D', 'E', 'F']
    	]);
    	table.row(1, [
    		Math.random(),
    		Math.random(),
    		Math.random()
    	]);
    });
    

You can of course also update a single cell. Here with compact syntax:

  • ts.ui.get('#example6', table => {
    	table.rows([
    		['A', 'B', 'C'],
    		['D', 'E', 'F']
    	]);
    	table.cell(1, 1, Math.random());
    });
    

You can use array methods like push, pop, shift, unshift, splice, reverse and so on to mange the rows. Just note that the length property is readonly.

  • ts.ui.get('#example7', table => {
    	var rows = table.rows();
    	rows.push([1, 2, 3]);
    	rows.unshift([4, 5, 6]);
    	rows.splice(0, 0, [7, 8, 9]);
    	rows.reverse();
    });
    

Here' a summary of the methods that deal with building the Table.