Official wrapper of Handsontable data grid for React

by React

react-handsontable

React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.

View Demo View Github View Documentation

Installation

Use npm to install this wrapper together with Handsontable.

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.

Usage

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

Styles

@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) {
    super(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" />);
  }
}

Features

A list of some of the most popular features:

  • Multiple column sorting
  • Non-contiguous selection
  • Filtering data
  • Export to file
  • Validating data
  • Conditional formatting
  • Merging cells
  • Custom cell types
  • Freezing rows/columns
  • Moving rows/columns
  • Resizing rows/columns
  • Hiding rows/columns
  • Context menu
  • Comments
  • Auto-fill option