The Javascript spreadsheet with React

1. Integrating jExcel with React

React with jExcel sample project

2. React component implementation

class Jexcel extends React.Component {
    constructor(props) {
        super(props);
        this.options = props.options;
        this.wrapper = React.createRef();
    }

    componentDidMount = function() {
        this.el = jexcel(this.wrapper.current, this.options);
    }

    addRow = function() {
        this.el.insertRow();
    }

    render() {
        return (
            <div>
                <div></div><br/><br/>
                <input type='button' value='Add new row' onClick={() => this.addRow()}></input>
            </div>
        );
    }
}

var options = {
    data:[[]],
    minDimensions:[10,10],
};

ReactDOM.render(<Jexcel options={options} />, document.getElementById('spreadsheet'))

3. Jexcel implementation with react component with hooks

// Thanks to Leah Einhorn

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import jexcel from "jexcel";

const App = props => {
  const jexcelRef = useRef(null);

  useEffect(() => {
    jexcel(jexcelRef.current, props.options);
  }, [props.options]);

  const addRow = () => {
    jexcelRef.current.jexcel.insertRow();
  };

  return (
    <div>
      <div ref={jexcelRef} />
      <br />
      <input type="button" onClick={addRow} value="Add new row" />
    </div>
  );
};

const options = {
  data: [[]],
  minDimensions: [10, 10]
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App options={options} />, rootElement);