Handsontable example

HTML

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

CSS

.redCol {color:red ;font-weight:bold;}
</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.id="hot";
 		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;
   console.log(target);
   
   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) {         
         this.hotTableComponent.current.hotInstance.setCellMeta(rowIndex, columnIndex, 'className', 'redCol'); 
       }
     }
   }
   this.hotTableComponent.current.hotInstance.render()
  };

 render() {
   return (
  <div>
    <button id="addCaution" onClick={this.addCaution.bind(this)}> Caution </button>      
    <HotTable ref={this.hotTableComponent} id={this.id} settings={this.tableSettings} />
  </div>
   );
  }
}
  
ReactDOM.render(<ApplyCustomCellStyle />, document.getElementById('example'));