/ S

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

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:

    // Make sure to add code blocks to your code group

    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 →