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

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;