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.

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