I am using a renderer to check for negative numbers and change font color to red. It is doesn’t work correctly. Sometimes it will only work on the first row and I have to scroll the rows out of the view and back in before they turn red. Same thing happens when I sort.
const negativeValueRenderer = function (instance, td, row, col, prop, value) {
// eslint-disable-next-line prefer-rest-params
Handsontable.renderers.NumericRenderer.apply(this, arguments);
if (parseFloat(value, 10) < 0) {
td.style.color = 'red';
}
};
class Inputs extends React.Component {
constructor(props) {
super(props);
this.hotTableComponent = React.createRef();
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
}
render() {
return (
<HotTable
ref={this.hotTableComponent}
id="hot"
data={this.props.data}
dataSchema={config.DATA_SCHEMA}
stretchH="all"
manualColumnResize
rowHeaders={false}
columnSorting
outsideClickDeselects={false}
dropdownMenu
filters
hiddenColumns={{
columns: [14],
indicators: false,
}}
selectionMode="multiple"
fixedColumnsLeft={1}
colHeaders={config.COLUMN_HEADERS}
colWidths={this.props.columnWidths.slice(0, -1)}
columns={config.COLUMNS}
width={this.props.windowWidth - 20}
currentRowClassName="currentRow"
currentColClassName="currentCol"
licenseKey="non-commercial-and-evaluation"
height={utils.getPerc(this.props.windowHeight, this.props.inputsOffset)}
cells={(row, col) => {
const cp = {};
if (col === 0 || col === 1) cp.className = 'text-left';
if (col !== 0 || col !== 1) cp.renderer = negativeValueRenderer;
return cp;
}}
afterRenderer={() => {
window.hotInstance = this.hotTableComponent.current.hotInstance;
}}
/>
);
}
}