Add summary row in qx.ui.table.Table for column - qooxdoo

Question

How can i add a summary row to a qx.ui.table.Table to display a total for a column.
The only idea yet is to combine two tables, one with the data and one with the totals. Is there any more elegant way how i can handle this?
Edit
The table is used with the qx.ui.table.model.Simpleas table model.

Answer 1

Well, as long as you use qx.ui.table.model.Simple, you can calculate summary row and append it to the data array before passing it to the model. Or you can do it in a listener of the model's dataChanged. Also it's possible to subclass qx.ui.table.rowrenderer.Default to emphasize the row in some way.
Here goes example and here's playground snippet:
qx.Class.define("app.SummaryRowRenderer", {
extend : qx.ui.table.rowrenderer.Default,
members : {
// override
getRowClass : function(rowInfo)
{
var model = rowInfo['table'].getTableModel();
var isSummaryIndex = model.getColumnIndexById('_isSummary');
return rowInfo['rowData'][isSummaryIndex] ? 'summary' : '';
}
},
defer : function()
{
var entry = qx.bom.element.Style.compile({
'backgroundColor' : '#ccc',
'fontWeight' : 'bold'
});
var sheet = qx.bom.Stylesheet.createElement();
qx.bom.Stylesheet.addRule(sheet, '.summary .qooxdoo-table-cell', entry);
}
});
var model = new qx.ui.table.model.Simple();
model.setColumns(
[this.tr('Name'), this.tr('Value'), null],
['name', 'value', '_isSummary']
);
var table = new qx.ui.table.Table(model);
table.set({
'statusBarVisible' : false,
'columnVisibilityButtonVisible' : false,
'showCellFocusIndicator' : false,
'dataRowRenderer' : new app.SummaryRowRenderer()
});
table.getTableColumnModel().setColumnVisible(2, false);
this.getRoot().add(table, {'edge': 0});
var data = [
{'name': 'foo', 'value': 10},
{'name': 'bar', 'value': 100},
{'name': 'baz', 'value': 1000},
{'name': 'quz', 'value': 10000},
];
qx.event.Timer.once(function()
{
var dataWithSummary = qx.lang.Array.clone(data);
dataWithSummary.push(data.reduce(function(r, v)
{
r['value'] += v['value'];
return r;
}, {'name': 'Summary', 'value': 0, '_isSummary': true}));
model.setDataAsMapArray(data);
}, this, 1000);