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

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="example"></div>

Initialize your grid

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

1
const container = document.querySelector('#example');
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('#example');
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>('#example')!;
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
});