React Spreadsheet
Create web-based spreadsheets using React and Jspreadsheet.
React examples
- Basic React Spreadsheet Basic react spreadsheet with translations.
- Custom react spreadsheet cell editors How to create a custom cell editor with React.
- Custom React Components integration Integrate a custom React component (Recharts) to a excel like formula on Jspreadsheet.
- Online spreadsheet with React Classes Create a basic react spreadsheet using React classes
NextJS examples
- Online XLSX NextJS reader Creating an online XLSX reader with NextJS and Jspreadsheet
- Import a Excel file to NextJS How to import an excel file in NextJS using Jspreadsheet.
Basic spreadsheet with Hooks
import React, {useRef, useEffect} from "content/docs/v9/react";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
// Set the license
jspreadsheet.setLicense("M2UwZjBhYWZmMjhjM2JiN2U1ZTYxMzJkZmZlZGI0OGY3YzcyNjVmNWI3Y2I2ZDU5M2ViOThkNjEyM2ViZGZlODNlY2E4ZDg1ODI5NGRmZDE5NTM0YTZmMzk3ZDhmZGRlMDM3ZWVjNTdiNjIwNGQ5ZDM5NjVlZDQxZjAyNTIyY2EsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEEwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5");
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('M2UwZjBhYWZmMjhjM2JiN2U1ZTYxMzJkZmZlZGI0OGY3YzcyNjVmNWI3Y2I2ZDU5M2ViOThkNjEyM2ViZGZlODNlY2E4ZDg1ODI5NGRmZDE5NTM0YTZmMzk3ZDhmZGRlMDM3ZWVjNTdiNjIwNGQ5ZDM5NjVlZDQxZjAyNTIyY2EsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEEwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
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>
);
}
}
let options = {
worksheets: [
{
minDimensions: [10, 10]
}
],
};
ReactDOM.render(<Jspreadsheet options={options} />, document.getElementById("root"));