Tutorial: Quick start

Quick start


Follow these steps to install Handsontable Pro:

  1. Install
  2. Create
  3. Initialize
Edit this page

Step 1: Install

After your purchase we'll send across your login info. Sign in to your account and head to the Install section and choose one of the available download methods and follow the instructions.

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,
  dropdownMenu: true
});

Step 4: The result

That's it, now your Handsontable Pro 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 Pro? Lucky you, it's really simple, just head to the Binding data page to learn more about it.