Have ideas to improve npm?Join in the discussion! »

    ikizmet-react-handsontable

    1.1.2 • Public • Published

    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 ikizmet-react-handsontable

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    10.9 MB

    Total Files

    10

    Last publish

    Collaborators

    • avatar