/ S

This page covers a next version of Handsontable, and is not published yet.

This page covers a non-latest version of Handsontable.

# Installation in React

Table of contents

# Overview

React installation and basic usage guide.

# Install with npm

This component needs the Handsontable library to work. Use npm 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>
  );
}

← Basic examples in React →