React Data Grid Instance methods

You can programmatically change the internal state of Handsontable beyond what's possible with props. To do that, you will need to call API methods of the relevant Handsontable instance associated with your instance of the HotTable component.

The following example implements the HotTable component showing how to reference the Handsontable instance from the wrapper component.

import { useRef } from 'react'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import { createSpreadsheetData } from './helpers'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { const hotTableComponent = useRef(null); const selectCell = () => { // The Handsontable instance is stored under the `hotInstance` property of the wrapper component. hotTableComponent.current.hotInstance.selectCell(1, 1); }; return ( <> <HotTable ref={hotTableComponent} data={createSpreadsheetData(4, 4)} colHeaders={true} height="auto" licenseKey="non-commercial-and-evaluation" /> <div className="controls"> <button onClick={selectCell}>Select B2 cell!</button> </div> </> ); } ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/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.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

import { useRef } from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import { createSpreadsheetData } from './helpers';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

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

  const selectCell = () => {
    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
    hotTableComponent.current.hotInstance.selectCell(1, 1);
  };

  return (
    <>
      <HotTable
        ref={hotTableComponent}
        data={createSpreadsheetData(4, 4)}
        colHeaders={true}
        height="auto"
        licenseKey="non-commercial-and-evaluation"
      />
      <div className="controls">
        <button onClick={selectCell}>Select B2 cell!</button>
      </div>
    </>
  );
}

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