/ S

This page covers a non-latest version of Handsontable.

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:

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