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
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
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
Related articles
Related guides
Related API reference
- Configuration options:
- Hooks: