Filtering the columns
The table doesn't really know anything about "filtering", but it does support a button
which can be assigned an icon
and an onclick
method. Perhaps you can use this to create your own filtering UI in an Aside or something.
-
var table = ts.ui.get('#table1'); var popup = ts.ui.Notification; table.cols([ { label: 'Hello', type: 'ts-number', button: { icon: 'ts-icon-addfilter', onclick: function() { this.icon = 'ts-icon-delete'; popup.success('Clicked!'); } } } ]);
You can change the icon
and the onclick
method as often as you like.
var table = ts.ui.get('#table1');
var popup = ts.ui.Notification;
var mycol = table.cols()[0];
mycol.button.icon = 'ts-icon-view';
mycol.button.onclick = function() {
popup.success('Clicked again!');
};
When you implement filtering, you can either build the rows from scratch or update the visible
property of the existing row — like in this example.
-
var table = ts.ui.get('#table2'); var popup = ts.ui.Notification; var isodd = false; table.rows([[1], [2], [3], [4], [5], [6], [7]]).cols([ { label: 'All numbers', type: 'ts-number', button: { icon: 'ts-icon-addfilter', info: 'Show odd rows', onclick: function() { isodd = !isodd; this.icon = isodd ? 'ts-icon-delete' : 'ts-icon-addfilter'; this.info = isodd ? 'Show all rows' : 'Show odd rows'; table.cols()[0].label = isodd ? 'Odd numbers' : 'All numbers'; table.rows().forEach(function(row, i) { row.visible = isodd ? (i % 2 === 0) : true; }); } } } ]);
The button
gets hidden by the search
because it doesn't look right to have both. Let us know if that becomes a problem.