/ S

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

This page covers a non-latest version of Handsontable.

# Installation

Table of contents

Install Handsontable in your preferred way.

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.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 →