/ 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

Install Handsontable

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

Import Handsontable's CSS

Import Handsontable's CSS into your application.

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

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.

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={data}
  rowHeaders={true}
  colHeaders={true}
  height="auto"
  licenseKey="non-commercial-and-evaluation" // for non-commercial use only
/>

Basic example

    ← Binding to data →