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