/ 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:

    // Make sure to add code blocks to your code group

    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:

      // Make sure to add code blocks to your code group

      # 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

      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
});

      ← Binding to data →