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, { Component, Fragment } from 'react';
    import ReactDOM from 'react-dom';
    import {HotTable} from '@handsontable-pro/react';
    import Handsontable from 'handsontable-pro';


    class ApplyCustomCellStyleTable extends Component {
      constructor(props){
        super(props);
        this.tableSettings = {
          data: Handsontable.helper.createSpreadsheetData(10, 10),
          width: 1200,
          height: 272,
          colWidths: 100,
          rowHeights: 23,
          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("selected cell info >>>.",selected);
      
        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 === 'addButton') {  
                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>
        );
      }
    }

    export default...