Installation in React

Table of contents

• Overview
• Install with npm
• Basic usage

Overview

React installation and basic usage guide.

Install with npm

This component needs the Handsontable library to work. Use npm (opens new window) to install the packages.

npm install handsontable @handsontable/react

Basic usage

Import the Handsontable styles to your project.

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

Use the Handsontable for React component in your app.

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const hotData = [
  ["", "Tesla", "Volvo", "Toyota", "Honda"],
  ["2020", 10, 11, 12, 13],
  ["2021", 20, 11, 14, 13],
  ["2022", 30, 15, 12, 13]
];

const App = () => {
  return (
    <div id="hot-app">
      <HotTable
        data={hotData}
        colHeaders={true}
        rowHeaders={true}
        width="600"
        height="300"
      />
    </div>
  );
}