Handsontable example

HTML

<div id="example">
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/handsontable-pro@6.0.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@6.0.1/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/6.0.1/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable-pro/react@2.0.0/dist/react-handsontable.min.js"></script>

Babel + JSX

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('example'));