React Data GridInstallation
Install Handsontable through your preferred package manager, and control your grid through the HotTable
component's props.
On this page
1
Install Handsontable
To install Handsontable locally using a package manager, run one of these commands:
npm install handsontable @handsontable/react
yarn add handsontable @handsontable/react
pnpm add handsontable @handsontable/react
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"
autoWrapRow={true}
autoWrapCol={true}
licenseKey="non-commercial-and-evaluation" // for non-commercial use only
/>
Preview the result
A | B | C | D | E | |
---|---|---|---|---|---|
1 | Tesla | Volvo | Toyota | Ford | |
2 | 2019 | 10 | 11 | 12 | 13 |
3 | 2020 | 20 | 11 | 14 | 13 |
4 | 2021 | 30 | 15 | 12 | 13 |
A | B | C | D | E |
---|
1 |
---|
2 |
3 |
4 |
Related articles
Related guides
Related API reference
- Configuration options:
- Hooks:
There is a newer version of Handsontable available. Switch to the latest version ⟶