react-handsontable

A React wrapper for the the Handsontable spreadsheet component.

Table of contents

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

Installation

You can install the component using npm:

npm install react-handsontable

If you don't want to use npm, you can download the latest version as a .zip file. The file you need is located in the /dist/ directory.

Download ZIP

Basic usage

Assuming you have downloaded or otherwise acquired the code, you can use use the <HotTable> component just like a normal React component. For example:

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

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 hello@handsontable.com.

Other Wrappers

Handsontable comes with more wrappers and directives for popular frameworks:

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