React Data Grid Installation

React Data GridInstallation

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

On this page

Install Handsontable

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

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-wrapper';

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 />

TIP

@handsontable/react-wrapper requires at least React@18 and is built with functional editors and renderers components in mind.

Preview the result