I test setCellMeta with react handson table.
I want to add className in selected cell.Preformatted text
what am I wrong?
I think setCellMeta isn’t working.
Am I use other method for that?
this is my sample code ==================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable-pro/react';
import Handsontable from 'handsontable-pro';
class ApplyCustomCellStyle extends React.Component {
constructor(props){
super(props);
this.tableSettings = {
data: Handsontable.helper.createSpreadsheetData(8, 10),
width: 800,
height: 272,
rowHeaders: true,
colHeaders: true,
outsideClickDeselects: false,
selectionMode: 'multiple', // 'single', 'range' or 'multiple'
};
this.hotTableComponent = React.createRef();
}
addCaution(e){
let selected = this.hotTableComponent.current.hotInstance.getSelected();
let target = e.target.id;
for (let index = 0; index < selected.length; index += 1) {
let item = selected[index];
let startRow = Math.min(item[0], item[2]);
let endRow = Math.max(item[0], item[2]);
let startCol = Math.min(item[1], item[3]);
let endCol = Math.max(item[1], item[3]);
for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {
for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {
if (target === 'addCaution') {
this.hotTableComponent.current.hotInstance.setCellMeta(rowIndex, columnIndex, 'className', 'redCol');
}
}
}
}
};
render() {
return (
<div>
<button id="addCaution" onClick={this.addCaution}> Caution </button>
<HotTable ref={this.hotTableComponent} id="hot" settings={this.tableSettings} />
</div>
);
}
}
ReactDOM.render(<ApplyCustomCellStyle />, document.getElementById('example1'));