Selecting the rows

You can mark rows as selectable with the method of that name. The callback fires whenever one or more rows changes state. The arguments selected and unselected arguments are both arrays-of-rowindexes.

  • var table = ts.ui.get('#table1');
    var popup = ts.ui.Notification;
    table.rows([
    	{cells: ['A', 'D', 'G'], selected: true},
    	{cells: ['B', 'E', 'H']},
    	{cells: ['C', 'F', 'I']},
    ]);
    table.selectable(function debug(selected, unselected) {
    	popup.success([
    		JSON.stringify(selected),
    		JSON.stringify(unselected)
    	].join(', '));
    });

You can mark individual rows as un-selectable with the selectable property.

  • var table = ts.ui.get('#table5');
    var popup = ts.ui.Notification;
    table.rows([
    	{cells: ['A', 'D', 'G']},
    	{cells: ['B', 'E', 'H'], selectable: false},
    	{cells: ['C', 'F', 'I']},
    ]);
    table.selectable(function debug(selected, unselected) {
    	popup.success([
    		JSON.stringify(selected),
    		JSON.stringify(unselected)
    	].join(', '));
    });

You can control selection using the methods select, unselect and toggle. The methods take one or more indexes (or an array of indexes) as arguments.

  • var table = ts.ui.get('#table3');
    table.selectable().rows([
    	['A', 'E', 'I'],
    	['B', 'F', 'J'],
    	['C', 'G', 'K'],
    	['D', 'H', 'L'],
    ]).select(0, 1).toggle([2, 3]);

You can also omit the argument to select, unselect or toggle everything.

ts.ui.get('#table3').toggle();

You can retrieve the selected indexes (as an array) with the selected method.

var table = ts.ui.get('#table3');
var array = table.selected();
var popup = ts.ui.Notification;
popup.success(JSON.stringify(array));

You can also confirm selection by passing one or more indexes (or an array).

var table = ts.ui.get('#table3');
var popup = ts.ui.Notification;
if(table.selected(0, 1, 2, 3)) {
	popup.success('All selected!');
} else {
	popup.warning('You must select them all.');
}

If you add columns to the table, you'll get a selection menu in the header.

  • var table = ts.ui.get('#table2');
    table.selectable();
    table.cols(['One', 'Two', 'Three']);
    table.rows([
    	{cells: ['A', 'D', 'G']},
    	{cells: ['B', 'E', 'H']},
    	{cells: ['C', 'F', 'I']},
    ]);

The menu selects or deselects all visible rows. If there are multiple pages in the table, you'll be presented with the opportunity to select all pages.

  • $.getJSON('assets/rowdata.json', function(json) {
    	var table = ts.ui.get('#table4').selectable();
    	table.cols(['ID', 'Name', 'Price']).rows(json).max(5);
    });

If you are loading the table data incrementally (so you manage paging yourself), you might like to know when all or none is selected via the menu. The Table supports two additional callbacks that can be assigned via selectable().

table.selectable(onselect, onselectall, onunselectall);

You can also assign these methods directly.

table.onselect = function(selected, unselected) {};
table.onselectall = function() { console.log('All'); };
table.onunselectall = function() { console.log('None'); };

Here's a summary of the methods that deal with row selection.