Handsontable for React is the official wrapper for Handsontable, a JavaScript data grid component with a spreadsheet look & feel. It easily integrates with any data source and comes with lots of useful features like data binding, validation, sorting or powerful context menu.
Installation
This component needs the Handsontable library to work. We suggest using npm to install the package.
npm install handsontable-pro @handsontable-pro/react
npm install handsontable @handsontable/react
Basic usage
Import the Handsontable styles to your project
@import 'handsontable-pro/dist/handsontable.full.css';
for Handsontable Community Edition
@import 'handsontable/dist/handsontable.full.css';
Then use Handsontable for React component in your codebase
import React from 'react';
import { HotTable } from '@handsontable-pro/react';
// import { HotTable } from '@handsontable/react'; // for Handsontable Community Edition
class App extends React.Component {
constructor(props) {
super(props);
this.data = [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2016", 10, 11, 12, 13],
["2017", 20, 11, 14, 13],
["2018", 30, 15, 12, 13]
];
}
render() {
return (
<div id="hot-app">
<HotTable data={this.data} colHeaders={true} rowHeaders={true} width="600" height="300" stretchH="all" />
</div>
);
}
}
License
Handsontable for React is an open source library released free under the MIT license.