The Javascript spreadsheet with React
1. Integrating jExcel with React
React with jExcel sample project
2. React component implementation
class Jexcel extends React.Component { constructor(props) { super(props); this.options = props.options; this.wrapper = React.createRef(); } componentDidMount = function() { this.el = jexcel(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], }; ReactDOM.render(<Jexcel options={options} />, document.getElementById('spreadsheet'))
3. Jexcel implementation with react component with hooks
// Thanks to Leah Einhorn import React, { useRef, useEffect } from "react"; import ReactDOM from "react-dom"; import jexcel from "jexcel"; const App = props => { const jexcelRef = useRef(null); useEffect(() => { jexcel(jexcelRef.current, props.options); }, [props.options]); const addRow = () => { jexcelRef.current.jexcel.insertRow(); }; return ( <div> <div ref={jexcelRef} /> <br /> <input type="button" onClick={addRow} value="Add new row" /> </div> ); }; const options = { data: [[]], minDimensions: [10, 10] }; const rootElement = document.getElementById("root"); ReactDOM.render(<App options={options} />, rootElement);