React Spreadsheet
The React wrapper for Jspreadsheet provides a bridge to incorporate advanced data grid functionalities within React applications. This wrapper simplifies embedding Jspreadsheet's interactive spreadsheet-like controls into React-based projects, focusing on seamless data manipulation and interface consistency. Designed for developers seeking to enhance application data grids with comprehensive features, the React wrapper aligns with modern development practices and user interaction standards.
Updates
From version 11, please import the CSS files as below.
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
Documentation
Utilizing the React Data Grid Wrapper
Begin by installing the JSS data grid React wrapper
$ npm install @jspreadsheet/react
Crafting Your First JSS React Data Grid
Learn to construct a web-based spreadsheet employing the Jspreadsheet React wrapper.
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Define the global jspreadsheet license
jspreadsheet.setLicense('ODY1ZTY3YTk0ZmM5Yjg1MTk2ZjdjNDg2NjA2MmRkODBiNWI3MjY3ZmEyNDY4ZWYzODhkNTI1ZjFhYzE2YjcwYmVkMjQ2NTA0NjM0YmY4M2JiY2IyN2ZmYTA0N2ZhMzAxNTk2MGJlNjExZDVhNzkyMGNiMjZkOWMzMzQ5ZWI0ZjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTRNelkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<Spreadsheet ref={spreadsheet} tabs={true} toolbar={true}>
<Worksheet />
</Spreadsheet>
);
}
Direct Library Usage
Developers may utilize the library directly within their implementations for enhanced flexibility and customization.
React with Hooks
import React, { useRef, useEffect } from "react";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
// Define the global jspreadsheet license
jspreadsheet.setLicense('ODY1ZTY3YTk0ZmM5Yjg1MTk2ZjdjNDg2NjA2MmRkODBiNWI3MjY3ZmEyNDY4ZWYzODhkNTI1ZjFhYzE2YjcwYmVkMjQ2NTA0NjM0YmY4M2JiY2IyN2ZmYTA0N2ZhMzAxNTk2MGJlNjExZDVhNzkyMGNiMjZkOWMzMzQ5ZWI0ZjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTRNelkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
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 ref={jssRef} />);
}
React classes
import React from "react";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
jspreadsheet.setLicense('ODY1ZTY3YTk0ZmM5Yjg1MTk2ZjdjNDg2NjA2MmRkODBiNWI3MjY3ZmEyNDY4ZWYzODhkNTI1ZjFhYzE2YjcwYmVkMjQ2NTA0NjM0YmY4M2JiY2IyN2ZmYTA0N2ZhMzAxNTk2MGJlNjExZDVhNzkyMGNiMjZkOWMzMzQ5ZWI0ZjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTRNelkyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
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"));
Limitations
setState utilization
In the current version of the wrapper, using setState to update the component automatically is not supported.
Library integration examples
Real-Time React Spreadsheet
Create a Real-time JavaScript Spreadsheet with React and TypeScript using Jspreadsheet.
Codesandbox examples
React Spreadsheet Examples
- React Spreadsheet Basic react spreadsheet with translations.
- React Spreadsheet Cell Editors How to create a custom data grid cell editor with React.
- Custom React Components Integrate a custom React component (Recharts) with Jspreadsheet.
- React Spreadsheet as React Classes Create a basic react spreadsheet using React classes
- React Data Grid Validations How to crate a data grid with cell validations
- MUI React as a Custom Editor React Calendar with Antd
- Antd React Calendar Cell Editor React Calendar with MUI
- MUI React Calendar as a Custom Editor
NextJS integration
- 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.