/ 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

# Overview

This guide details how to install Handsontable.

TIP

This section is dedicated to the pure JavaScript version of Handsontable. If you use a framework in your project, follow one of the available guides to install and use the library:

# Download and install the library

Run the following command in your terminal

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

    # Create a placeholder

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

    Import JavaScript and CSS into your application. You don't have to do that if you use CDN files.

    import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';

    # Initialize the grid

    Now turn your placeholder 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 →