Best Data Grid for React with Spreadsheet Look and Feel.


15,43675510.0.017 days ago3 years agoMinified + gzip package size for @handsontable/react in KB


Handsontable - data grid for React

Data Grid for React

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

npm npm Build status FOSSA Status Known Vulnerabilities

Handsontable data grid for React


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


Get Started

Install with npm

Run the following command in your terminal

npm install handsontable @handsontable/react

You can load it directly from jsDelivr as well.

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react/dist/react-handsontable.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

The component will be available as Handsontable.react.HotTable.


Use this data grid as you would any other component in your application. Options can be set as HotTable props.


@import '~handsontable/dist/handsontable.full.css';

React Component

import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';

class HotApp extends React.Component {
  constructor(props) {
    this.data = [
      ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
      ['2019', 10, 11, 12, 13],
      ['2020', 20, 11, 14, 13],
      ['2021', 30, 15, 12, 13]

  render() {
    return (<HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" />);

View live demo


We provide support for developers working with commercial version via contact form or at support@handsontable.com.

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


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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.