Spreadsheet-like data grid editor that provides copy/paste functionality compatible with Excel/Google Docs
npm install @quantlab/handsontableHandsontable is a pure JavaScript/HTML5 spreadsheet component with an Excel-like appearance. It can easily integrate with any data source and comes with a variety of useful features like data binding, validation, sorting or powerful custom context menu. Actively supported by the Handsoncode team team and many contributors.
npm install handsontable --save
`
or
`
bower install handsontable --save
`
$3
- Download ZIP
- Download from nuget
$3
If you use a modular script loader then you can require Handsontable just like any other module:
`javascript
require(['handsontable'], function(Handsontable) {
var hot = new Handsontable(document.getElementById('example'), {
data: [[1, 2, 3, 4], [1, 2, 3, 4]]
});
});
`
$3
If you use a CommonJS compatible environment you can use the require function to import Handsontable:
`javascript
var handsontable = require('handsontable');
`
To bundle Handsontable with Browserify you must specify the module names of all required modules:
browserify main.js -o bundle.js -r moment -r pikaday -r numbro
Basic usage
Assuming you have already installed Handsontable, add an empty element that will be turned into a spreadsheet:
`html
`
In the next step, pass a reference to that element and fill it with sample data:
`javascript
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
});
``