Tutorial: Quick start

Quick start


Follow these steps to install Handsontable:

  1. Install
  2. Create
  3. Initialize
  4. Alternative installation
Edit this page

Step 1: Install

There are many ways to install Handsontable but we suggest using Bower. It is a fast and simple dependency manager. Just type in the following command:

bower install handsontable --save

Bower manages all dependencies so just sit back and relax. After it's done, embed the code inside your HTML file. Make sure that the paths are set correctly.

<script src="/dist/handsontable.full.js"></script>

<link rel="stylesheet" media="screen" href="/dist/handsontable.full.css">

Step 2: Create

Add an empty <div> element that will be turned into a spreadsheet. Let's give this element an "example" ID.

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

Step 3: Initialize

In the next step, pass a reference to that <div> element and fill it with sample data:

var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});

Step 4: The result

That's it, now your Handsontable is up and ready to use:

You are probably wondering how to not only bind the data source but also save the changes made in Handsontable? Lucky you, it's really simple, just head to the Binding data page to learn more about it.

Alternative installation

  • Download Handsontable from GitHub directly as a ZIP file. Note that by doing that you’ll need to manage all dependencies by yourself:

  • Embed the latest (v0.33.0), full distribution of the library that includes all dependencies and is served from our directory. Note that requires our servers to be up and running.

    <script src="//handsontable.com/dist/handsontable.full.js"></script>

    <link rel="stylesheet" media="screen" href="//handsontable.com/dist/handsontable.full.css">

  • To create a custom Handsontable build, head to Custom Build page.