Documentation keyboard_arrow_right V7 keyboard_arrow_right Examples keyboard_arrow_right React

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 "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 = "YzBhMWMyZjEwM2NlOTBjNjBiMDBiNjM2YjZiNTA5NTBjMTY1NTczOGM0Mjc2OWM3ODU3ZDMwNGE5NWJmMWQ5YzQ1YWFlM2U0ZDljYmVlMThmZTI3NjI3YTVlMmQyNjNiZmVjOTgwNGIwN2U5YjA3ODllMmRkZThjMTNiYWZjODYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lOelF5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5";

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

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