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 "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 = "OTM1YjE5YWQ1ZWJlMTQyNmJkMTIxZTIwMjkyMjA0MzdjZjRjZDhlYzhmMWM1NjE0OTIxMWYwMjM5YzNhNzYxMDE3MDNkYzA4YTZhZTMwNWU5OGJlYzFlN2FhNWM4YzdjMGU0ZmQxYWVjYjk1ZmYxODFjMDlkMmIwNTIwODk3ZTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazBNVEl3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==";
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: 'OTM1YjE5YWQ1ZWJlMTQyNmJkMTIxZTIwMjkyMjA0MzdjZjRjZDhlYzhmMWM1NjE0OTIxMWYwMjM5YzNhNzYxMDE3MDNkYzA4YTZhZTMwNWU5OGJlYzFlN2FhNWM4YzdjMGU0ZmQxYWVjYjk1ZmYxODFjMDlkMmIwNTIwODk3ZTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qazBNVEl3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
};
ReactDOM.render(<Jspreadsheet options={options} />, document.getElementById('spreadsheet'))