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.