Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

This package has been deprecated

Author message:

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

react-handsontable

0.3.2 • Public • Published

⚠️ 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 Build Status

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

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:

install

npm i react-handsontable

Downloadsweekly downloads

2,762

version

0.3.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
Report a vulnerability