import React,{ useRef }from'react';import ReactDOM from'react-dom';import{ HotTable }from'@handsontable/react';import Handsontable from'handsontable';const hotSettings ={data: Handsontable.helper.createSpreadsheetData(4,4),colHeaders:true,height:'auto',licenseKey:'non-commercial-and-evaluation'};constApp=()=>{const hotTableComponent =useRef(null);constswapHotData=()=>{// The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
hotTableComponent.current.hotInstance.loadData([['new','data']]);};return(<divclassName="controls"><HotTableref={hotTableComponent}settings={hotSettings}/><br/><buttononClick={swapHotData}>Load new data!</button></div>);}
ReactDOM.render(<App/>, document.getElementById('example1'));