Handsontable example

HTML

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

CSS

div#example {
  width: 100vw;
  height: 30vw;
}
</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/8.2.0/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/[email protected]/dist/react-handsontable.min.js"></script>

Babel + JSX

import React, {useState, useRef} from 'react';
  import ReactDOM from 'react-dom';
  import {HotTable} from '@handsontable-pro/react';
  import Handsontable from 'handsontable-pro';
  
  const App = () => {
     
     const table2Ref = useRef()
  
  	 const [table1Data, setTable1Data] = useState(Handsontable.helper.createSpreadsheetData(4, 4))
     const [table2Data, setTable2Data] = useState(Handsontable.helper.createSpreadsheetData(4, 4))   
  
     const afterChangeHandler = (changes, source) => {
     		if (!changes || source == 'loadData')
     			return;
          
     		// In real life we'd use the actual changes
        const newData = Handsontable.helper.createEmptySpreadsheetData(4, 4)
        setTable2Data(newData)
     }
  
      return (
        <div>
          <HotTable id="hot1" colHeaders={true} undo={true} afterChange={afterChangeHandler} data={table1Data} />
          <HotTable id="hot2" ref={table2Ref} undo={false} rowHeaders={true} data={table2Data} />
        </div>
      )
  }
  
  ReactDOM.render(<App />, document.getElementById('example'));