Setting row header style after change

Tags: #<Tag:0x00007f343b7c8fc8>

Currently we have a requirement to set the row header to have a colored border or colored backgound. I have the following in my afterChange event which works for the cell, but I need the header:

hot.setCellMeta(row, col, ‘className’, ‘cell-data-changed htMiddle’);
hot.render(); // By the way this is REALLY slow to render when your doing fast editing.

I have a custom row header and I need to highlight just the row header cell:

afterGetRowHeaderRenderers(headerRenderers) {
const that = this;
headerRenderers.push(function(row, th) {
that.view.appendRowHeader(row, th);
th.style.verticalAlign = ‘middle’;
th.innerHTML = “CUSTOM Header HTML”;
}
}

How do I get the custom header cell from the afterChange hook so I can highlight the header cell to indicate that the row has changed? I also want to check that cell for highlighting so that only have to call render once.

Also, render() is slow (quite a bit of lag when calling it) and I’m on a really fast laptop. Maybe a 1 second delay from the enter to the actual color change. Is there a way I can just use jQuery on the element and just set the class?

Hi @glbarkerconsulting,

You can use a mix of the following hooks:

You can find a simple demo here: https://jsfiddle.net/handsoncode/bm7cepgw/.