Installation

Install Handsontable through your preferred package manager, or import Handsontable’s assets directly from a CDN.

Overview

To start using Handsontable, follow these steps:

Install Handsontable

Get Handsontable’s files in your preferred way.

Using a package manager

To install Handsontable locally using a package manager, run one of these commands:

1
npm install handsontable

1
yarn add handsontable

1
pnpm add handsontable

Install Skills for Claude Code

Skills for Claude Code give Claude AI deep knowledge of Handsontable’s APIs, so it can build, configure, and debug your grid accurately. We recommend installing them alongside Handsontable.

In Claude Code, run:

1
/plugin marketplace add handsontable/handsontable-skills
2
/plugin install handsontable-skills@handsontable-skills

For more details, see Skills for Claude Code.

Using a CDN

To get Handsontable’s files from a CDN, use the following locations:

https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js

Import Handsontable’s JavaScript

Import Handsontable’s JavaScript into your application.

Using CommonJS or a package manager

If you’re using Handsontable as a CommonJS package, or as an ECMAScript module (using a package manager), import the full distribution of Handsontable as a JavaScript file.

Use your bundler’s preferred method of importing files. For example:

1
import Handsontable from 'handsontable';

Using the `script` tag

If you’re using Handsontable as a traditional UMD package, import the full distribution of Handsontable as a minified JavaScript file.

Use the script tag. For example, if you’re loading Handsontable’s JavaScript from a CDN:

1
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

Create a container

In your HTML, add an empty div, which serves as a container for your Handsontable instance.

1
<div id="example1"></div>

Initialize your grid

Now turn your container into a data grid with sample data.

1
const container = document.querySelector('#example1');
2

3
const hot = new Handsontable(container, {
4
  data: [
5
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
6
    ['2019', 10, 11, 12, 13],
7
    ['2020', 20, 11, 14, 13],
8
    ['2021', 30, 15, 12, 13]
9
  ],
10
  rowHeaders: true,
11
  colHeaders: true,
12
  height: 'auto',
13
  autoWrapRow: true,
14
  autoWrapCol: true,
15
  licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
16
});

Preview the result

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8
const data = [
9
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
10
  ['2019', 10, 11, 12, 13],
11
  ['2020', 20, 11, 14, 13],
12
  ['2021', 30, 15, 12, 13],
13
];
14

15
new Handsontable(container, {
16
  data,
17
  rowHeaders: true,
18
  colHeaders: true,
19
  height: 'auto',
20
  autoWrapRow: true,
21
  autoWrapCol: true,
22
  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only
23
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector<HTMLDivElement>('#example1')!;
8

9
const data: Handsontable.CellValue[][] = [
10
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
11
  ['2019', 10, 11, 12, 13],
12
  ['2020', 20, 11, 14, 13],
13
  ['2021', 30, 15, 12, 13],
14
];
15

16
new Handsontable(container, {
17
  data,
18
  rowHeaders: true,
19
  colHeaders: true,
20
  height: 'auto',
21
  autoWrapRow: true,
22
  autoWrapCol: true,
23
  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only
24
});