How to get each column totals in handsontable?

Question

I'm trying to find out how to create a table that its first row contains the totals of its corresponding column, and then move it to another table in the upper side, I've been able to do the second thing but not the first, in my customJSFiddle its located what I have done already, this is the portion of the code I'm trying:

  $('#totalOtherConceptC_DataTable').handsontable({
    data: dataOtherConceptCDetails,
    colHeaders: false,
    columns: [{
            type: 'text'
            }, {
            type: 'numeric',
            renderer: function(instance, td, row, col, prop, value){
                        if(row == instance.countRows() - 1){
                            value = Operations.getTotal(1);
                        }

                        Handsontable.NumericRenderer.apply(this, arguments);

                      }
            }]
    });

The totals are calculated like this for each column

 Operations.getTotal = function(col){
        return dataOtherConceptCDetails.reduce(function(sum, row){
           return sum + row[col]; 
        }, 0);
  };

I've been based on this JSFiddle code that it works, but when I try to implement it, it doesnt' work at all. Is there anything I'm missing?

Answer 1

I had this problem too... The example never worked on a standalone implementation... Here is the workaround I could come up with: jsFiddle

renderer : function(instance, td, row, col, prop, value) {
            if (row == instance.countRows() - 1) {
        value = parseFloat(document.getElementById("cellTotal").value);
    } else {
        setTotalValue(row, value);
    }

Handsontable.renderers.NumericRenderer.apply(this, arguments);

Note that I have had to use a hidden placeholder to retain the sum of the column cells. May not be the best approach, but worked for me. Hoping that this would help saving precious time in working around the issue...

Tested with IE 10 and Chrome.