Installation

Install Handsontable through your preferred package manager, and control your grid through the HotTable component’s props.

Install Handsontable

To install Handsontable locally using a package manager, run one of these commands:

1
npm install handsontable @handsontable/react-wrapper

1
yarn add handsontable @handsontable/react-wrapper

1
pnpm add handsontable @handsontable/react-wrapper

Install Skills for Claude Code

Skills for Claude Code give Claude AI deep knowledge of Handsontable’s APIs, so it can build, configure, and debug your grid accurately. We recommend installing them alongside Handsontable.

In Claude Code, run:

1
/plugin marketplace add handsontable/handsontable-skills
2
/plugin install handsontable-skills@handsontable-skills

For more details, see Skills for Claude Code.

Register Handsontable’s modules

Import and register all of Handsontable’s modules with a single function call:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
registerAllModules();

Or, to reduce the size of your JavaScript bundle, import only the modules that you need.

Use the `HotTable` component

The main Handsontable component is called HotTable.

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

To set Handsontable’s configuration options, use HotTable’s props. For example:

1
<HotTable
2
  data={[
3
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
4
    ['2019', 10, 11, 12, 13],
5
    ['2020', 20, 11, 14, 13],
6
    ['2021', 30, 15, 12, 13]
7
  ]}
8
  rowHeaders={true}
9
  colHeaders={true}
10
  height="auto"
11
  autoWrapRow={true}
12
  autoWrapCol={true}
13
  licenseKey="non-commercial-and-evaluation" // for non-commercial use only
14
/>

Preview the result

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
12
        ['2019', 10, 11, 12, 13],
13
        ['2020', 20, 11, 14, 13],
14
        ['2021', 30, 15, 12, 13],
15
      ]}
16
      rowHeaders={true}
17
      colHeaders={true}
18
      height="auto"
19
      autoWrapRow={true}
20
      autoWrapCol={true}
21
      licenseKey="non-commercial-and-evaluation" // for non-commercial use only
22
    />
23
  );
24
};
25

26
export default ExampleComponent;

1
import { FC } from 'react';
2
import { HotTable, HotTableProps } from '@handsontable/react-wrapper';
3
import Handsontable from 'handsontable/base';
4
import { registerAllModules } from 'handsontable/registry';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const ExampleComponent: FC = () => {
10
  return (
11
    <HotTable
12
      data={[
13
        ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
14
        ['2019', 10, 11, 12, 13],
15
        ['2020', 20, 11, 14, 13],
16
        ['2021', 30, 15, 12, 13],
17
      ]}
18
      rowHeaders={true}
19
      colHeaders={true}
20
      height="auto"
21
      autoWrapRow={true}
22
      autoWrapCol={true}
23
      licenseKey="non-commercial-and-evaluation" // for non-commercial use only
24
    />
25
  );
26
};
27

28
export default ExampleComponent;