Follow these steps to install Handsontable:
Step 1: Install
There are many ways to install Handsontable, but we suggest using npm. Just type in the following command:
npm install handsontable
Create a placeholder - an HTML element holding a place for a data grid:
<div id="example"></div>
Import Handsontable and its stylesheet:
import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';
This will import Handsontable with all plugins, dependencies, cell types, etc.
If you want to start with a bare minimum package and choose parts of it explicitly,
follow the a guide about using modules.
Alternatively, use a CDN:
<script src="https://cdn.jsdelivr.net/npm/handsontable@8.3.0/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@8.3.0/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
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 id="example">
element and fill
it with sample data:
var data = [
['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
['2017', 10, 11, 12, 13],
['2018', 20, 11, 14, 13],
['2019', 30, 15, 12, 13]
];
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: 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? Head to Binding data page to learn more about it.
Alternative installation
Find all the available installation options on the Download Handsontable page.