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 "react";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
// Set the license
jspreadsheet.setLicense("NTUwZDgwNWNiZTcyYzU0ZGNjOWM1NzFkYjM5YmYwMGUxYTE2NTlhMWViNjhlMzhmOGIwOGU1NDI3MjZhMTdmZjhjMjU1NzliNzVmYjNhZTY0Y2UyMDRkMDA3NTU3M2FjYmRiZGMxNTljZTgzZDgxNDE5ODhlODY4ZjJmMGY5OWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzVPRGd3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==");
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('NTUwZDgwNWNiZTcyYzU0ZGNjOWM1NzFkYjM5YmYwMGUxYTE2NTlhMWViNjhlMzhmOGIwOGU1NDI3MjZhMTdmZjhjMjU1NzliNzVmYjNhZTY0Y2UyMDRkMDA3NTU3M2FjYmRiZGMxNTljZTgzZDgxNDE5ODhlODY4ZjJmMGY5OWEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzVPRGd3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
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"));