A React wrapper for the the Handsontable spreadsheet component.

1. Installation
2. Building
3. Basic usage
4. Examples
5. License
6. Contact
7. Other wrappers

To install the component, use npm:

npm install react-handsontable

Note, that to use Handsontable within React, you'll have to install the handsontable package as well:

npm install handsontable

If you used npm to download the library, you should be good to go, but if you want to make a build yourself, go to the directory where react-handsontable source is located and run:

npm run build

This will create a /dist/ directory with react-handsontable.js and react-handsontable.min.js for you to use.

react-handsontable creates a <HotTable> component. You can use it just like any other React component. For example:

// import React...
import React from 'react';
import ReactDOM from 'react-dom';

// ... Handsontable with its main dependencies...
import moment from 'moment';
import numbro from 'numbro';
import pikaday from 'pikaday';
import Zeroclipboard from 'zeroclipboard';
import Handsontable from 'handsontable';

// ... and HotTable
import HotTable from 'react-handsontable';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handsontableData = [
      ["", "Ford", "Volvo", "Toyota", "Honda"],
      ["2016", 10, 11, 12, 13],
      ["2017", 20, 11, 14, 13],
      ["2018", 30, 15, 12, 13]
    ];
  }

  render() {
    return (
      <div id="example-component">
        <HotTable root="hot" data={this.handsontableData} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
      </div>
    );
  }
}

Note, that you can provide the Handsontable options either as:

• individual component properties

<HotTable root="hot" data={this.handsontableData} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />

• an object passed to a single settings property

<HotTable root="hot" settings={{
    data: this.handsontableData,
    colHeaders: true,
    rowHeaders: true,
    width: 600,
    height: 300,
    stretchH: 'all'
}} />

The root property declares the id of the root element for the table. It is optional - if it isn't provided, the table will get a random generated id.

• Simple react-handsontable implementation
• Simple react-handsontable implementation with a single-property configuration
• Interactive HotTable demo

react-handsontable is released under the MIT license. Copyrights belong to Handsoncode sp. z o.o.

Feel free to give us feedback on this wrapper using this contact form or write directly at [email protected].

Handsontable comes with more wrappers and directives for popular frameworks:

• hot-table (Polymer - WebComponents)
• ngHandsontable (Angular 1)