/ S

There is a newer version of Handsontable available. Switch to the latest version ⟶

JavaScript Data Grid Installation

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

In this article

Overview

To start using Handsontable, follow these steps:

1. 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:

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

    3. 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" />

    4. Create a container

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

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

    5. 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',
  licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
});

    Preview the result

    ← Binding to data →