Examples

Back to Examples

React Spreadsheet

How to create a rich data grid with spreadsheet controls using React and Jspreadsheet Pro.

React Spreadsheet Controls

See this example working online

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

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

export default function App() {
  const spreadsheetRef = useRef(null);
  const license = "Mjg5OGQ1ZDFjYjY2MTYyZDRhNTc4M2NmNjU2ZWViNGFmZDMxZWE1Y2QzMDIyNjMxODlhOTJjMGNmNGY1OTIzOWUzZDQ4YTFiMmU4NWI1N2IxN2RkYWIzYThiMGY0NzJjMTRmMDcwMDMwYWI1ODUzNGVkNWFmYjkyOWY1MDgxNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16TXlOVEk1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==";

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

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

React Data Grid using React Classes

React Spreadsheet with Jspreadsheet

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

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

    addRow = function() {
        this.el.insertRow();
    }

    render() {
        return (
            <div>
                <div></div>
                <input type='button' value='Add new row' onClick={() => this.addRow()}></input>
            </div>
        );
    }
}

let options = {
    data:[[]],
    minDimensions:[10,10],
    license: 'Mjg5OGQ1ZDFjYjY2MTYyZDRhNTc4M2NmNjU2ZWViNGFmZDMxZWE1Y2QzMDIyNjMxODlhOTJjMGNmNGY1OTIzOWUzZDQ4YTFiMmU4NWI1N2IxN2RkYWIzYThiMGY0NzJjMTRmMDcwMDMwYWI1ODUzNGVkNWFmYjkyOWY1MDgxNWUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeU16TXlOVEk1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
};

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