React Spreadsheet
Create a web-based spreadsheet using React and Jspreadsheet.React spreadsheet with hooks
Basic React exampleSee this example working online
NextJS
Create an online XLSX reader with NextJSSee this example working online
Source code
import React, { useRef, useEffect } from "react"; import jspreadsheet from "jspreadsheet"; import "/node_modules/jspreadsheet/dist/jspreadsheet.css"; import "/node_modules/jsuites/dist/jsuites.css"; export default function App() { const jssRef = useRef(null); const license = "ZmQ4NWYyYjVmYTBjMDQwMDA3NjUwZjUwNTA4MDkwYWYzNWQ4OWE3MjQyZjJiZDU1YzM1MjA4OTI5OTEwZDlkMTNiMThkNzQ3YzNjZWI2ZGNjM2MyZGIwNDBmMzZmYzQwYWU1Y2EwOTEyMGE4MzU2M2Q2MjMzMTQ2MTUwNWEzOTIsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5qQTFNVGd3TURBc0ltUnZiV0ZwYmlJNld5SnFjMmhsYkd3dWJtVjBJaXdpYW5Od2NtVmhaSE5vWldWMExtTnZiU0lzSW1OellpNWhjSEFpTENKMVpTNWpiMjB1WW5JaUxDSjFibWwwWldRdVpXUjFZMkYwYVc5dUlpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6SWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luQmhjbk5sY2lJc0luTm9aV1YwY3lJc0ltWnZjbTF6SWl3aWNtVnVaR1Z5SWl3aVptOXliWFZzWVNKZGZRPT0"; useEffect(() => { // Create only once if (!jssRef.current.jspreadsheet) { jspreadsheet(jssRef.current, { worksheets: [ { minDimensions: [10, 10] } ], license: license }); } }, null); return ( <div> <div ref={jssRef} /> </div> ); }
React Spreadsheet using a class
React with Jspreadsheet sample project
Source code
import React from "react"; import jspreadsheet from "jspreadsheet"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; jspreadsheet.setLicense('your-license-here'); 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> ); } } var options = { worksheets: [ { minDimensions: [10, 10] } ], }; ReactDOM.render(<Jspreadsheet options={options} />, document.getElementById("root"));