React Data Grid Installation

HotTable component
Import Handsontable's CSS
Basic example
Related articles
- Related guides
- Related API reference

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

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

Import Handsontable's CSS

Import Handsontable's CSS into your application.

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

Basic example

import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  const data = [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ];

  return (
      <HotTable
        data={data}
        rowHeaders={true}
        colHeaders={true}
        height="auto"
        licenseKey="non-commercial-and-evaluation" // for non-commercial use only
      />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example'));

<script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> 
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

<div id="example" class="hot "></div>

Modules

Configuration options:
Hooks:

← Introduction Binding to data →