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 "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

// Set the license
jspreadsheet.setLicense("MGVlN2E1OWVjM2FmODk5ZTFmYWFhMWZhZWY5Yjg2YjQ3NjkyNDRhYWU4Mzc4MDFiZjJjMzk4ZjVkNTA3YzU0OWZmYjdhZmE2MGRmNGVlZjczZDcyZGMxYjg1ZDJjOTQzMmM2OGQ2ZWQ3YjlkNDk4NDYxMmEzOGRhOTJkZjI0OTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16UTVOemMwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==");

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('MGVlN2E1OWVjM2FmODk5ZTFmYWFhMWZhZWY5Yjg2YjQ3NjkyNDRhYWU4Mzc4MDFiZjJjMzk4ZjVkNTA3YzU0OWZmYjdhZmE2MGRmNGVlZjczZDcyZGMxYjg1ZDJjOTQzMmM2OGQ2ZWQ3YjlkNDk4NDYxMmEzOGRhOTJkZjI0OTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16UTVOemMwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

Edit this page on GitHub