Examples
The Javascript spreadsheet with React
Integrating jspreadsheet with React
React spreadsheet
See this example working onlineimport React, { useRef, useEffect } from "react"; import jspreadsheet from "jspreadsheet-pro"; import xls from "@jspreadsheet/xls"; import "/node_modules/jspreadsheet-pro/dist/jspreadsheet.css"; import "/node_modules/jsuites/dist/jsuites.css"; export default function App() { const spreadsheetRef = useRef(null); const license = "OWU5NmEwNjY1ODQxNDg4ODYyMjRlYjU0YzBmMmI1MDAxNTI1NzJlZWQyN2RmN2RiZjE0NGRhY2M0NzIyNjlhYWI2YTBlNGFkMzhjM2E0ZDZkZDZlYjhkNjkyMTNjZWM5ODYzMDE1ZWEzYjlmM2M0N2NmNDNiYzcwM2MzNjNhNzcsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5ETTJOek0yTURBc0ltUnZiV0ZwYmlJNld5SmpjMkl1WVhCd0lpd2lhbk5tYVdSa2JHVXVibVYwSWl3aWQyVmlMbUZ3Y0NJc0lteHZZMkZzYUc5emRDSmRMQ0p3YkdGdUlqb2lNeUo5"; 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 class
React with jspreadsheet sample project
Source code
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><br/><br/> <input type='button' value='Add new row' onClick={() => this.addRow()}></input> </div> ); } } var options = { data:[[]], minDimensions:[10,10], license: 'YWQ1Zjg4MzAwYTk0NjYwMWQzYTFlYWY2YzViY2JmYWMzYWQxZTc4N2ZlMTE1N2M3ZGU2MzcyODM0ZjM5YTdiMTY3Y2FmYTk2ZDJiNjRjNTIyZGMyMTA3M2NlMGFlNWQyMjRmNjg4YzE4OTA4YjU5NmI3Y2YyMzAxNjUyZWMxNzIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOVGs1T1RreU15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=', }; ReactDOM.render(<Jspreadsheet options={options} />, document.getElementById('spreadsheet'))