Handsontable example

HTML

<div id="example1" class="hot"></div>

CSS

.controllers {
  width: 200px;
  float: left;
}
.controllers input[type=checkbox] {
  margin-left: 5px;
  margin-right: 5px;
}


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

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

Babel + JSX

import React from 'react';
  import ReactDOM from 'react-dom';
  import { HotTable } from '@handsontable/react';
  import Handsontable from 'handsontable';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.handsontableData = Handsontable.helper.createSpreadsheetData(6, 10);
    }
  
    render() {
      return (
        <div>
          <HotTable
            id="hot"
            data={this.handsontableData}
            colHeaders={true}
            rowHeaders={true}
            />
        </div>
      );
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('example1'));