I have a HandsOnTable table and would like to set the background colour of every cell, without providing a renderer function or the like. I tried copying the process that their Science demo uses but my table has formatting on the values and that gets lost with their renderer function code.

My version of the renderer:

var footerRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = '#EEE';
    td.style.textAlign = 'right';
}

To clarify: The problem here is that using a renderer function with HandsOnTable appear to wipe out formatting which has been applied by the properties of the table, when something simple like changing the background colour of a cell is required.

I have a HandsOnTable table and would like to set the background colour of every cell, without providing a renderer function or the like. I tried copying the process that their Science demo uses but my table has formatting on the values and that gets lost with their renderer function code.

My version of the renderer:

var footerRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = '#EEE';
    td.style.textAlign = 'right';
}

To clarify: The problem here is that using a renderer function with HandsOnTable appear to wipe out formatting which has been applied by the properties of the table, when something simple like changing the background colour of a cell is required.

• javascript
• css
• handsontable

• possible to use vanilla js? – user4602228 Commented Feb 20, 2017 at 17:20
• Not sure how to identify the one particular element I'm looking for. – Matt W Commented Feb 20, 2017 at 17:23
• Also, this does not appear to be documented: Handsontable.renderers.TextRenderer.apply – Matt W Commented Feb 20, 2017 at 17:24

1 Answer 1

There are a variety of ways to acplish this. However, the cells function is probably the best.

Option 1

Step 1: Set up your handsontable:

var container = document.getElementById('Element_ID');
hot = new Handsontable(container, {
  data: <yourdataArray>,
  autoRowSize:false,
  autoWrapRow:true,
  autoRowSize: false
});

Step 2: Update the handsontable settings using the cells function. The cells function will go through each row and cell in the table

 // update spreadsheet setting
 hot.updateSettings({
     cells: function (row, col, prop) {                        
          var cell = hot.getCell(row,col);   // get the cell for the row and column                                                                                                                
          cell.style.backgroundColor = "#EEE";  // set the background color
     }
 });

Option 2

I remend the cells function over this, but this does demonstrate other ways of doing the same thing.

var hot = new Handsontable(document.getElementById('example1'), options);
var rows=hot.countRows();  // get the count of the rows in the table
var cols=hot.countCols();  // get the count of the columns in the table.
for(var row=0; row<rows; row++){  // go through each row of the table
    for(var col=0; col<cols; col++){  // go through each column of the row
        var cell = hot.getCell(row,col);  
        cell.style.background = "#00FF90";
    }
}
hot.render();  // ensure the table is refreshed.