React Spreadsheet
Create web-based spreadsheets using React and Jspreadsheet.
React examples
NextJS examples
Basic spreadsheet with Hooks
import React, { useRef, useEffect } from "react";
import jspreadsheet from "jspreadsheet";
import "/node_modules/jspreadsheet/dist/jspreadsheet.css";
import "/node_modules/jsuites/dist/jsuites.css";
// Set the license
jspreadsheet.setLicense("ZmQ4NWYyYjVmYTBjMDQwMDA3NjUwZjUwNTA4MDkwYWYzNWQ4OWE3MjQyZjJiZDU1YzM1MjA4OTI5OTEwZDlkMTNiMThkNzQ3YzNjZWI2ZGNjM2MyZGIwNDBmMzZmYzQwYWU1Y2EwOTEyMGE4MzU2M2Q2MjMzMTQ2MTUwNWEzOTIsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5qQTFNVGd3TURBc0ltUnZiV0ZwYmlJNld5SnFjMmhsYkd3dWJtVjBJaXdpYW5Od2NtVmhaSE5vWldWMExtTnZiU0lzSW1OellpNWhjSEFpTENKMVpTNWpiMjB1WW5JaUxDSjFibWwwWldRdVpXUjFZMkYwYVc5dUlpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6SWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luQmhjbk5sY2lJc0luTm9aV1YwY3lJc0ltWnZjbTF6SWl3aWNtVnVaR1Z5SWl3aVptOXliWFZzWVNKZGZRPT0");
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>
<div ref={jssRef} />
</div>
);
}
React Spreadsheet using a class
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"));