Skip to content
Handsontable dev

Instance methods

Reference a Handsontable instance from within a React component, to programmatically perform actions such as selecting cells.

Use Handsontable’s API

You can programmatically change the internal state of Handsontable beyond what’s possible with props. To do that, 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.

JavaScript
import { useRef } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  const data = [
    ['A1', 'B1', 'C1', 'D1'],
    ['A2', 'B2', 'C2', 'D2'],
    ['A3', 'B3', 'C3', 'D3'],
    ['A4', 'B4', 'C4', 'D4'],
  ];


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


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


export default ExampleComponent;
TypeScript
import { useRef } from 'react';
import { HotTable, HotTableRef } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';


// register Handsontable's modules
registerAllModules();


const ExampleComponent = () => {
  const data: string[][] = [
    ['A1', 'B1', 'C1', 'D1'],
    ['A2', 'B2', 'C2', 'D2'],
    ['A3', 'B3', 'C3', 'D3'],
    ['A4', 'B4', 'C4', 'D4'],
  ];


  const hotTableComponentRef = useRef<HotTableRef>(null);


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


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


export default ExampleComponent;

TypeScript: type the hotInstance reference

Since 14.1.0, HotTable is a functional component, not a class component. Because of this, you can no longer use HotTable as the type argument of useRef to get access to the Handsontable instance:

// This no longer works as expected since 14.1.0
import HotTable from '@handsontable/react-wrapper';
const ref = useRef<HotTable>(null); // TypeScript error or wrong type

Instead, use the HotTableRef interface exported from @handsontable/react-wrapper:

import { HotTable, HotTableRef } from '@handsontable/react-wrapper';


const ref = useRef<HotTableRef>(null);


// Access the Handsontable instance through `hotInstance`:
ref.current?.hotInstance?.selectCell(1, 1);

HotTableRef exposes the following properties:

PropertyTypeDescription
hotInstanceHandsontable | nullThe Handsontable instance. Use this to call Handsontable API methods.
hotElementRefHTMLElementThe root DOM element of the grid.