Examples

React Spreadsheet

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

React Spreadsheet Controls

import React, {useRef, useEffect} from "content/docs/v7/examples/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 = "YzJlYThkM2ViOWY3YmE0ZWFjNzFjNjg1YWRmYzdkNzhiNmUzZTUxMjZiNDE1MzU5OWZhOTEwMGE5ODEyZjNlNTBhNzNhYmQwNTUwMWE0YmY1MDE1ODk3NGIyMzIyYmM1ZmRhNjcyMzcwODE1NjljOWQwNzEyMWVhNDc2Mjg0MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRM01qSXpOVFE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==";

    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: 'YzJlYThkM2ViOWY3YmE0ZWFjNzFjNjg1YWRmYzdkNzhiNmUzZTUxMjZiNDE1MzU5OWZhOTEwMGE5ODEyZjNlNTBhNzNhYmQwNTUwMWE0YmY1MDE1ODk3NGIyMzIyYmM1ZmRhNjcyMzcwODE1NjljOWQwNzEyMWVhNDc2Mjg0MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRM01qSXpOVFE0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
};

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

Edit this page on GitHub