This package has been deprecated

Author message:

Handsontable for React is now available as @handsontable/react.

⚠️ This package is deprecated.

Handsontable for React is now available for download as @handsontable/react.

Handsontable PRO for React is available as @handsontable-pro/react.

react-handsontable

A React wrapper for the the Handsontable spreadsheet component.

Table of contents

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

Installation

For detailed installation instructions, please take a look at our wiki under "Installation guide".

Building

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.

Basic usage

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';
 
// ... 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.

Examples

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

License

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

Contact

Feel free to give us feedback on this wrapper using this contact form or write directly at [e-mail].

Other Wrappers

Handsontable comes with more wrappers and directives for popular frameworks:

• hot-table (Polymer - WebComponents)
• ngHandsontable (Angular 1)
• vue-handsontable-official (Vue.js)