Referencing the Handsontable instance in React

Table of contents

• Overview
• Example

Overview

The following example implements the @handsontable/reactcomponent showing how to reference the Handsontable instance from the wrapper component.

Example

import React, { useRef } from 'react'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import { createSpreadsheetData } from './helpers'; // register Handsontable's modules registerAllModules(); const hotSettings = { data: createSpreadsheetData(4, 4), colHeaders: true, height: 'auto', licenseKey: 'non-commercial-and-evaluation' }; const App = () => { const hotTableComponent = useRef(null); const swapHotData = () => { // The Handsontable instance is stored under the `hotInstance` property of the wrapper component. hotTableComponent.current.hotInstance.loadData([['new', 'data']]); }; return ( <div className="controls"> <HotTable ref={hotTableComponent} settings={hotSettings}/> <br/> <button onClick={swapHotData}>Load new data!</button> </div> ); } ReactDOM.render(<App/>, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.0/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.0/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import { createSpreadsheetData } from './helpers';

// register Handsontable's modules
registerAllModules();

const hotSettings = {
  data: createSpreadsheetData(4, 4),
  colHeaders: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
};

const App = () => {
  const hotTableComponent = useRef(null);

  const swapHotData = () => {
    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
    hotTableComponent.current.hotInstance.loadData([['new', 'data']]);
  };

  return (
    <div className="controls">
      <HotTable ref={hotTableComponent} settings={hotSettings}/>
      <br/>
      <button onClick={swapHotData}>Load new data!</button>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('example1'));