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

* {
  font-family: Helvetica, Arial, sans-serif
}

#example-container {
  position: relative;
}

#hot-preview { 
  #hot {
    overflow: hidden;
    width: 700px;
    height: 400px;
  }
}

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      settings: {
        data: [
          [1, 'a'],
          [2, 'b']
        ],
        colHeaders: ['Number', 'Text'],
        columns: [
          {type: 'numeric'},
          {type: 'text'}
        ],
    }
    }
    this.hotTableComponent = React.createRef();
  }
 
  handleClick = () => {
    this.setState({
      testValue: true,
    });
  }
  
  shouldComponentUpdate() {
    return false;
  }
  
  render() {
    return (
      <div id="example-component">
        <div id="hot-preview">
           <button onClick={this.handleClick}>Click Me!</button>
        <HotTable root="hot" ref={this.hotTableComponent} settings={this.state.settings} />
          </div>
      </div>
    );
  }
}

ReactDOM.render(<ExampleComponent />, document.getElementById('example'));