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: 'ZTczYTZjZDJjNDMxYTVlZjVkZmM1MGVjMWUwZDVkOTA1NjUwZjg4YmE2YjEyMTM0MTk2MjI0YzM4MDExZDJlNjllNjIzNWE3M2FjMmMwZjQ5OTFkZmUxYjMzNmIwNWQ5YjhiNTViMDA3OGU4OWQ1NjY3OGE2YmQ4ZGQ1ZTI4ZDEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09',
};

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