Given a handsontable with multiple columns each using a different renderer, how can I change individual cell background-color upon data update?

Question

I have a handonstable constructed whereby each column has its own renderer dependant on the data type (could be Numeric, Text, or custom). I want to be upon user change a field for any of these columns update the color of the cell to denote its been changed.

My problem is that I can't really set a custom onUpdate renderer because that would override all those existing renderers. Any ideas?

Answer 1

You can set renderer for a specific cell, not the entire column by using getCellMeta:

afterChange: function(changes, source){
    if (source !== 'loadData' && source !== 'afterChange') {
      changes.forEach(function(cellchanges) {
        var row = cellchanges[0];
        var col = hot.propToCol(cellchanges[1]);
        hot.getCellMeta(row, col).renderer = textHasChangedRenderer;
    });
  }
}

Two things to remember:

1) you would need a range of "has-changes" renderers to cover the default ones and your custom ones:

var textHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var numberHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.NumericRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var dateHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.DateRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};
var customHasChangedRenderer = function(instance, td, row, col, prop, value, cellProperties) {
  customRenderer.apply(this, arguments);
  td.style.backgroundColor = '#cbd9e4';
};

2) assigning text renderer to a numeric column will break formatting, so you would need to keep track of initial renderer-to-column assignment somehow.