handsontable

Handsontable is a JavaScript/HTML5 data grid component with spreadsheet look & feel.
It provides easy data binding, data validation, filtering, sorting and CRUD operations.

Handsontable works with Vue, React and Angular.

Installation

Use npm to install the latest version.

npm install handsontable

You can use Yarn, NuGet or other methods as well. You can load it directly from jsDelivr.

Usage

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';

Alternatively, you can simply embed it in your HTML file.

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

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
});

See the live demo

Features

A list of some of the most popular features:

• Multiple column sorting
• Non-contiguous selection
• Filtering data
• Export to file
• Validating data
• Conditional formatting
• Merging cells
• Custom cell types
• Freezing rows/columns
• Moving rows/columns
• Resizing rows/columns
• Hiding rows/columns
• Context menu
• Comments
• Auto-fill option

Framework support

Use one of the available wrappers to use Handsontable with your favorite framework:

• Handsontable for Vue
• Handsontable for React
• Handsontable for Angular

Documentation

• Developer guides
• API Reference
• Release notes
• Twitter (News and updates)

Support and contribution

We provide support for all users through GitHub issues. If you have a commercial license then you can add a new ticket through the contact form.

If you would like to contribute to this project, make sure you first read the guide for contributors.

Browser compatibility

Handsontable is compatible with modern browsers such as Chrome, Firefox, Safari, Opera, and Edge. It also supports Internet Explorer 9 to 11 but with limited performance.

License

Handsontable is dual-licensed. You can either use a free license for all your non-commercial projects or purchase a commercial license. See the table below for a comparison of these two.

Free license	Paid license
For non-commercial purposes such as teaching, academic research, personal experimentation, and evaluating on development and testing servers.	For all commercial purposes
All features are available	All features are available
Community support	Dedicated support
Read the license	See plans

License key

The license key is obligatory since Handsontable 7.0.0 (released in March 2019).

If you use Handsontable for purposes not intended toward monetary compensation such as, but not limited to, teaching, academic research, evaluation, testing and experimentation, pass the phrase 'non-commercial-and-evaluation', as presented below:

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
});

If, on the other hand, you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

The license key is validated in an offline mode. No connection is made to any server. Learn more about how it works.

Created by Handsoncode with ❤ and ☕ in Tricity.

Changelog

[8.3.0] - 2021-01-28

Added

• Introduced a new feature that allows postponing the table render and internal data cache update. The table rendering time can be reduced several-fold times by batching (using the batch method), multi-line API calls, or manually suspending rendering using the suspendRender and resumeRender methods. #7274

• Introduced a possibility to import:

  • plugins
  • cell types
  • editors
  • renderers
  • validators

  as separate modules, along with the Handsontable base. This change allows utilizing only the parts of Handsontable the end application is actually using, without the overhead of the full bundle. #7403

• Added a new workflow for managing and generating changelogs. #7405

Fixed

• Fixed a bug with auto-execution of the first item in the ContextMenu plugin. #7364
• Fixed a bug where column sorting with multi column sorting crashed the table. #7415
• Added a missing entry for the skipRowOnPaste option in the TypeScript definition file. #7394
• Added missing tests to prevent issue #7377 from resurfacing. #7396
• Fixed an issue where altering columns did not update filters attached to columns. #6830
• Fixed typos and wrong return types in the TypeScript definition file. #7399, #7400
• Updated the dependencies causing potential security issues, as well as Babel configuration needed after the update. #7463

Changed

• Corrected a typo in a helper method from the Column Sorting plugin. #7375
• Optimized the performance of rendering the table with numerous spare rows (for minSpareRows, minSpareCols, minRows, and minCols options). #7439

For more information on Handsontable 8.3.0, see:

• Blog post (8.3.0)
• Documentation (8.3.0)
• Release notes (8.3.0)