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'}
    			]
    		}
    	]);
    });