Styling the table

The column type property works as a classname for both headers and cells.

```
ts.ui.get('#mytable', table => {
	table.cols([
		{label: 'Product'},
		{label: 'Regular Price', type: 'ts-number oldprice'},
		{label: 'Sale price', type: 'ts-number newprice'}
	]);
	table.rows([
		['Apple', '1.30', '1.00'],
		['Orange', '0.75', '0.50'],
		['Banana', '2.00', '1.25']
	]);
});
```

This means that you can style the columns using CSS that looks like this.

<style type="text/less">
	#mytable {
		th {
			&.oldprice {
				background: red;
			}
			&.newprice {
				background: green;
			}
		}
		td {
			&.oldprice {
				background: pink;
			}
			&.newprice {
				background: lime;
			}
		}
	}
</style>

A similar property works for the rows (if you switch to verbose syntax). You will of course need to defined these classnames somewhere in your CSS file.

```
ts.ui.get('#example2', table => {
	table.rows([
		{cells: ['A', 'D', 'G'], type: 'pale-red'},
		{cells: ['B', 'E', 'H'], type: 'pale-green'},
		{cells: ['C', 'F', 'I'], type: 'pale-blue'},
	]);
});
```

Finally, the individual table cells can be styled with the type property. Again, you will have to switch to verbose syntax in order to declare this property.

```
ts.ui.get('#example3', table => {
	table.rows([
		{
			cells: [
				{text: 'Normal'},
				{text: 'Normal'},
				{text: 'Special', type: 'very-special'}
			]
		}
	]);
});
```