JavaScript Data Grid Installation

JavaScript Data GridInstallation

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

On this page

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:

Using a CDN

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

Import Handsontable's JavaScript

Import Handsontable's JavaScript into your application.

TIP

For a more optimized build, import individual parts of Handsontable's JavaScript, using modules.

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:

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:

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

Import Handsontable's CSS

Import Handsontable's CSS into your application.

Using import

If your bundler allows it, you can import Handsontable's full distribution CSS file, using an import statement.

import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';

You can also import Handsontable's CSS using a link tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />

Create a container

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

<div id="example"></div>

Initialize your grid

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

const container = document.querySelector('#example');

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

Preview the result