Back to Examples

React Spreadsheet

Create a web-based spreadsheet using React and Jspreadsheet.

React spreadsheet with hooks

Basic React example See this example working online

NextJS

Create an online XLSX reader with NextJS See this example working online

Source code

import React, { useRef, useEffect } from "react";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

export default function App() {
  const jssRef = useRef(null);
  const license = "YTRhMTE5YzBjYTEyZjVkYzA2OTUyZTgxZjZjNDM3ODg2MzViZjFkMGQ5MTM3MjUyODE2MmE5OWM3ZWM3MTA3N2NlNTE4N2JlMGJmMWUwM2Q0ZmNlMTAxMzAxYjQ4YzBlMTc1MmRjNjEyNWYyNmRkYTg3YzIyZTMzN2QzYjVlZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU5URTJPVEl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==";

  useEffect(() => {
    // Create only once
    if (!jssRef.current.jspreadsheet) {
      jspreadsheet(jssRef.current, {
        worksheets: [ { minDimensions: [6, 6] } ], 
        license: license
      });
    }
  }, null);

  return (
    <div>
      <div ref={jssRef} />
    </div>
  );
}

React Spreadsheet using a class

React with Jspreadsheet sample project

Source code

import React from "react";
import jspreadsheet from "jspreadsheet";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('YTRhMTE5YzBjYTEyZjVkYzA2OTUyZTgxZjZjNDM3ODg2MzViZjFkMGQ5MTM3MjUyODE2MmE5OWM3ZWM3MTA3N2NlNTE4N2JlMGJmMWUwM2Q0ZmNlMTAxMzAxYjQ4YzBlMTc1MmRjNjEyNWYyNmRkYTg3YzIyZTMzN2QzYjVlZGQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU5URTJPVEl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

  componentDidMount = function () {
    this.worksheets = jspreadsheet(this.wrapper.current, this.options);
  };

  addRow = function () {
    this.worksheets[0].insertRow();
  };

  render() {
    return (
      <div>
        <div ref={this.wrapper}></div>
        <p>
          <input type="button" value="Add new row" onClick={() => this.addRow()} className="jss_object" />
        </p>
      </div>
    );
  }
}

let options = {
  worksheets: [
    {
      minDimensions: [10, 10]
    }
  ],
};

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