React Spreadsheet

Create web-based spreadsheets using React and Jspreadsheet.

React examples

• Basic React spreadsheet
Basic react spreadsheet with translations.


• Custom react spreadsheet cell editors
How to create a custom cell editor with React.


• Custom React Components integration
Integrate a custom React component (Recharts) to a excel like formula on Jspreadsheet.


• Online spreadsheet with React Classes
Create a basic react spreadsheet using React classes

NextJS examples

• Online XLSX NextJS reader
Creating an online XLSX reader with NextJS and Jspreadsheet


• Import a Excel file to NextJS
How to import an excel file in NextJS using Jspreadsheet.

Basic spreadsheet with Hooks

import React, { useRef, useEffect } from "react";
import jspreadsheet from "jspreadsheet";
import "/node_modules/jspreadsheet/dist/jspreadsheet.css";
import "/node_modules/jsuites/dist/jsuites.css";

// Set the license
jspreadsheet.setLicense("ZmQ4NWYyYjVmYTBjMDQwMDA3NjUwZjUwNTA4MDkwYWYzNWQ4OWE3MjQyZjJiZDU1YzM1MjA4OTI5OTEwZDlkMTNiMThkNzQ3YzNjZWI2ZGNjM2MyZGIwNDBmMzZmYzQwYWU1Y2EwOTEyMGE4MzU2M2Q2MjMzMTQ2MTUwNWEzOTIsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5qQTFNVGd3TURBc0ltUnZiV0ZwYmlJNld5SnFjMmhsYkd3dWJtVjBJaXdpYW5Od2NtVmhaSE5vWldWMExtTnZiU0lzSW1OellpNWhjSEFpTENKMVpTNWpiMjB1WW5JaUxDSjFibWwwWldRdVpXUjFZMkYwYVc5dUlpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6SWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luQmhjbk5sY2lJc0luTm9aV1YwY3lJc0ltWnZjbTF6SWl3aWNtVnVaR1Z5SWl3aVptOXliWFZzWVNKZGZRPT0");

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

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

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

React Spreadsheet using a class

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

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

jspreadsheet.setLicense('your-license-here');

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>
    );
  }
}

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

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