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-pro@5.0.2/dist/handsontable.full.js"></script><link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable-pro@5.0.2/dist/handsontable.full.min.css"><script src="https://docs.handsontable.com/5.0.2/scripts/jsfiddle-fixer.js"></script><script src="https://cdn.jsdelivr.net/npm/react@16.4.1/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@16.4.1/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/@handsontable/react@1.0.0/dist/react-handsontable.min.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);
      }
      
  
    render(){
   
    const settings = {
      data: Handsontable.helper.createSpreadsheetData(11000, 30),
        rowHeaders: true,
        colHeaders: true,
        columnSorting: true,

        hiddenColumns: {
            columns: [1,2],
            indicators: false
        }
      }
      return (
        <div>
          <HotTable
            settings={ settings }
            />
        </div>
      );
    }
  }
  
  ReactDOM.render(<App />, document.getElementById('example1'));