React Data GridInstallation

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

1 Install Handsontable

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

npm install handsontable @handsontable/react
yarn add handsontable @handsontable/react
pnpm add handsontable @handsontable/react

2 Import Handsontable's CSS

Import Handsontable's CSS into your application.

import 'handsontable/dist/handsontable.full.min.css';

3 Register Handsontable's modules

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

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

registerAllModules();

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

4 Use the HotTable component

The main Handsontable component is called HotTable.

import { HotTable } from '@handsontable/react';

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

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

Preview the result

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

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

export default ExampleComponent;

There is a newer version of Handsontable available. Switch to the latest version ⟶