/ S

React Data Grid Installation

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

In this article

1. Install Handsontable

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

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"
  licenseKey="non-commercial-and-evaluation" // for non-commercial use only
/>

Preview the result

    ← Binding to data →