Can I invoke a style onto a cell directly rather than rendering it?

Tags: #<Tag:0x00007f8b28c390c8>
#1

I have a grid in a React app where, during processing of the data, I’m performing some validations and returning whatever failures to the global state in order missing/invalid fields to be highlighted. Some are in the grid, some aren’t.

The way it works is, during the validation checks, the row and fields that contain failures are sent to the main state to be stored in an array. Then, on the grid, I have a function on the renderer property that checks the array for the row number and field. If it’s there, it highlights the field red. So…

I’m setting up the grid like so:

this.state.hotSettings = {
  data: myState.Hadoop,
  width: "80%",
  height: 200,
  rowHeaders: true,
  colHeaders: Object.keys(myGrid[0]),
  columns: this.assembleColumns(),
  minSpareRows: 1,
  contextMenu: true,
  renderer: this.getRenderer
};
getRenderer(instance, td, row, col, prop, value, cellProperties) {
    ...some processes...
    const  failures = this.props.failures;
    if (value === "" && failures.filter(f => (f.row === row && f.prop === prop).length > 0) {
        td.style.backgroundColor = "#f00";
    }
}

This approach actually works fine. My issue with it is that, every single cell has to go through this logic every time the state changes. I’m wondering if there’s a way to just invoke the backgroundColor property onto the cell in question whenever a failure is registered on the state.

Something like:

var badCell = getCell(badRow, badCol)
badCell.td.style.backgroundColor = “#f00”;

Thanks!

#2

Welcome @xChristine7714

to change styling you should use setCellMeta method. Additionally, it is better to use classes than ‘style’.

#3