Basic examples

An implementation of the @handsontable/react wrapper.

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 ( ); } } ReactDOM.render(, document.getElementById('example1'));

An implementation of the component using a single-property (settings) configuration.

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 ( ); } } ReactDOM.render(, document.getElementById('example2'));

An interactive implementation using external checkboxes which control the table behavior.

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

import React from 'react'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import Handsontable from 'handsontable'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { settings: { data: Handsontable.helper.createSpreadsheetData(15, 20), width: 570, height: 220, } } } handleChange = (setting, states) => { return (event) => { this.setState({ settings: { [setting]: states[event.target.checked ? 1 : 0], } }); } }; render() { return ( Add fixed rows
Add fixed columns
Enable row headers
Enable column headers
); } } ReactDOM.render(, document.getElementById('example3'));

Edit this page