The Javascript spreadsheet with React

Integrating jspreadsheet with React

React spreadsheet

import React, { useRef, useEffect } from "react";
import jspreadsheet from "jspreadsheet-pro";
import xls from "@jspreadsheet/xls";

import "/node_modules/jspreadsheet-pro/dist/jspreadsheet.css";
import "/node_modules/jsuites/dist/jsuites.css";

export default function App() {
  const spreadsheetRef = useRef(null);
  const license =
    "OWU5NmEwNjY1ODQxNDg4ODYyMjRlYjU0YzBmMmI1MDAxNTI1NzJlZWQyN2RmN2RiZjE0NGRhY2M0NzIyNjlhYWI2YTBlNGFkMzhjM2E0ZDZkZDZlYjhkNjkyMTNjZWM5ODYzMDE1ZWEzYjlmM2M0N2NmNDNiYzcwM2MzNjNhNzcsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5ETTJOek0yTURBc0ltUnZiV0ZwYmlJNld5SmpjMkl1WVhCd0lpd2lhbk5tYVdSa2JHVXVibVYwSWl3aWQyVmlMbUZ3Y0NJc0lteHZZMkZzYUc5emRDSmRMQ0p3YkdGdUlqb2lNeUo5";

  useEffect(() => {
    if (!spreadsheetRef.current.jexcel) {
      jspreadsheet(spreadsheetRef.current, [
        {
          data: [["Sheet1"]],
          minDimensions: [10, 10],
          license: license
        },
        {
          data: [["Sheet2"]],
          minDimensions: [10, 10],
          license: license
        }
      ]);
    }
  }, null);

  return (
    <div>
      <div ref={spreadsheetRef} />
      <br />
      <input
        type="button"
        value="Download"
        onClick={() => xls(spreadsheetRef.current, { version: true })}
      />
    </div>
  );
}

React class

React with jspreadsheet sample project

Source code

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

    componentDidMount = function() {
        this.el = jspreadsheet(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],
    license: 'YWQ1Zjg4MzAwYTk0NjYwMWQzYTFlYWY2YzViY2JmYWMzYWQxZTc4N2ZlMTE1N2M3ZGU2MzcyODM0ZjM5YTdiMTY3Y2FmYTk2ZDJiNjRjNTIyZGMyMTA3M2NlMGFlNWQyMjRmNjg4YzE4OTA4YjU5NmI3Y2YyMzAxNjUyZWMxNzIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOVGs1T1RreU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=',
};

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