Handsontable example

HTML

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

CSS

</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 from 'react';
  import ReactDOM from 'react-dom';
  import {HotTable} from '@handsontable-pro/react';
  import Handsontable from 'handsontable-pro';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
  
      this.hotSettings1 = {
        data: Handsontable.helper.createSpreadsheetData(4, 4),
        colHeaders: true
      };
      
       this.hotSettings2 = {
        data: Handsontable.helper.createSpreadsheetData(4, 4),
        rowHeaders: true
      };
    }
  
    render() {
      return (
        <div>
          <HotTable id="hot1" settings={this.hotSettings1} />
          <HotTable id="hot2" settings={this.hotSettings2} />
        </div>
      );
    }
  }
  
  ReactDOM.render(<App/>, document.getElementById('example'));