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