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.