@handsontable/react

React Data Grid

Handsontable's wrapper for React combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.

---

Features

The most popular features of Handsontable for React:

  ✓  Multiple column sorting
  ✓  Non-contiguous selection
  ✓  Filtering data
  ✓  Export to file
  ✓  Validating data
  ✓  Conditional formatting
  ✓  Merging cells
  ✓  Freezing rows/columns
  ✓  Moving rows/columns
  ✓  Resizing rows/columns
  ✓  Hiding rows/columns
  ✓  Context menu
  ✓  Comments

Documentation

• Developer guides
• API Reference
• Changelog
• Demo

Get started

1. Install Handsontable

Get Handsontable from npm or Yarn.

npm install handsontable @handsontable/react

Import Handsontable's CSS:

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

2. Register Handsontable's modules

import { registerAllModules } from 'handsontable/registry';

registerAllModules();

3. 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:

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

registerAllModules();

const ExampleComponent = () => {

  return (
      <HotTable
        // set `HotTable`'s props here
        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"
        licenseKey="non-commercial-and-evaluation" // for non-commercial use only
      />
  );
};

View live demo

Support

We provide support for developers working with commercial version via contact form or at [e-mail].

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

Handsontable is a commercial software with two licenses available:

• Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
• Commercial license with support and maintenance included. See pricing plans.

License key

If you use Handsontable for React in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.

Proudly created and maintained by the Handsontable Team.

Changelog

[14.6.1] - 2024-10-17

Removed

• Removed aria-hidden from the TextEditor and PasswordEditor's TEXTAREA elements. #11218