The Javascript spreadsheet with React

Integrating jExcel with React

React spreadsheet

See this example working online

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

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

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

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

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

React class


React with jExcel sample project


Source code

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],
    license: 'YjQzMzdlOTRiOGY3ZTQ0ZDQ4ZTI1YWU3MDFjMDI0ZWJmOTNjODA1NWFiZTRiNDJhNmRiYTJlZjkwODQ3N2IwMWRmNWRjYWUwZDViM2VhMmI3NzVjOTcwMzVlN2ZhODI1Y2EyMmE3NDI0ZmE0ZjVmNGQ2MWEzN2M3MTA4MThhMDUsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk16SXdPVEkwTURBc0ltUnZiV0ZwYmlJNld5SnFjMlpwWkdSc1pTNXVaWFFpTENKcVpYaGpaV3d1Ym1WMElpd2lZMjlrWlhOaGJtUmliM2d1YVc4aUxDSnFjMmhsYkd3dWJtVjBJaXdpTVROemQyMHVZM05pTG1Gd2NDSXNJbXh2WTJGc2FHOXpkQ0pkTENKd2JHRnVJam9pTXlKOQ==',
};

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