React Spreadsheet

Introducing the new React wrapper for Jspreadsheet - the advanced data grid solution that offers intuitive spreadsheet-like controls. Jspreadsheet is a go-to choice for applications that require seamless data input and optimal user experience. And now, with the latest versions of Jspreadsheet, React developers can take advantage of a specialized wrapper that enables easy integration of the data grid into their applications.

Documentation

Using the react data grid wrapper

// First install the JSS data grid react wrapper
$ npm install @jspreadsheet/react

Create your first JSS react data grid

How to create a web-based spreadsheet using the Jspreadsheet react wrapper.

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

const license = 'ZjFiYTliNzM4ZDA5OTdiYjljNGI1ODQ4YTY2MDE4MTUxMTNkMThkY2VhMDQxOThiZTljZmRjOGZiMmMwOWVlZDU5MWNlODk0ZmY5Zjg5Y2RmYTlhOTYzMmQ0ZWJjMWM5OWYzMzgxOGNkMTNkODFhOTJjMjY3OWE1MzhlNWE0NmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTRPRGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} license={license} tabs={true} toolbar>
            <Worksheet />
        </Spreadsheet>
    );
}

Using the library

Alternatively, developers can use the library directly for more flexibility and customization in their implementation.

React with Hooks

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

// Replace your license here
const license = 'ZjFiYTliNzM4ZDA5OTdiYjljNGI1ODQ4YTY2MDE4MTUxMTNkMThkY2VhMDQxOThiZTljZmRjOGZiMmMwOWVlZDU5MWNlODk0ZmY5Zjg5Y2RmYTlhOTYzMmQ0ZWJjMWM5OWYzMzgxOGNkMTNkODFhOTJjMjY3OWE1MzhlNWE0NmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTRPRGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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 ref={jssRef} />);
}

React classes

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

jspreadsheet.setLicense('ZjFiYTliNzM4ZDA5OTdiYjljNGI1ODQ4YTY2MDE4MTUxMTNkMThkY2VhMDQxOThiZTljZmRjOGZiMmMwOWVlZDU5MWNlODk0ZmY5Zjg5Y2RmYTlhOTYzMmQ0ZWJjMWM5OWYzMzgxOGNkMTNkODFhOTJjMjY3OWE1MzhlNWE0NmQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTRPRGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

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

Limitations

setState utilization

The present iteration of the wrapper does not allow for the utilization of setState to trigger automatic updates on the component.

Library integration examples

Codesandbox examples

React integration

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
React data grid with validations How to crate a data grid with cell validations

NextJS integration

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.

Edit this page on GitHub