/ S

JavaScript Data Grid Installation

Table of contents

TIP

To install Handsontable using a framework, see:

Overview

You can get started with Handsontable in a few different ways. The most common is:

For more details and other installation methods, follow these steps:

  1. Install Handsontable.
  2. Import Handsontable's JavaScript into your application.
  3. Import Handsontable's CSS into your application.
  4. Create an HTML container.
  5. Initialize Handsontable.

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/dist/handsontable.full.min.css';

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.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 Handsontable

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

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

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
});

Preview the result

    ← Binding to data →