2

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.

Benno Eggnauer
  • 853
  • 1
  • 7
  • 19
  • What is the table data model you use? – saaj Jun 01 '15 at 16:31
  • The summary makes only sense on small data sets. In this case we use the `qx.ui.table.model.Simple` or in some special cases the `qx.ui.table.model.Filtered`. We don't use the remote model. – Benno Eggnauer Jun 02 '15 at 06:35

1 Answers1

0

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);
saaj
  • 23,253
  • 3
  • 104
  • 105
  • Thanks! I have created a [gist](https://gist.github.com/eggnaube/a168767cc7e2fba5d3b6) with a new table model class containing new sorters to hold the summary row at bottom of the body. – Benno Eggnauer Jun 04 '15 at 07:57