Skip to content
JavaScript/HTML5 Data Grid Component with Spreadsheet Look & Feel. Available for React, Vue and Angular.
JavaScript Other
Branch: master
Clone or download

Latest commit

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.codesandbox Add CodeSandbox CI to our PR workflow (#6565) Feb 3, 2020
.config Fix dbl click events on mobile devices (touch events) (#6709) Feb 17, 2020
.github Add github action for lib auditing (#6648) Feb 3, 2020
dist 7.4.2 Feb 19, 2020
languages 7.0.1 Mar 29, 2019
lib SheetClip should properly parse multiline text on Windows (#5607) Nov 22, 2018
resources Add Hot logo to the repo with demo screenshot (#6609) Feb 3, 2020
src Apply the logic from #6624 to the file structures of 7.x.x. Feb 17, 2020
test Fixed `closest` helper (#6712) Feb 17, 2020
.editorconfig Fix: clearing MergedCellsCollection should not throw an exception. #4988 Apr 25, 2018
.eslintignore Merge Handsontable Pro features to Handsontable (#5620) Dec 6, 2018
.eslintrc.js Add 3 proposals to babel config (#6335) Feb 3, 2020
.gitattributes use LF as the line ending in all OS (#5878) Jul 22, 2019
.gitignore Refactor Walkontable table renderers (#6089) Jul 25, 2019
.npmignore Handsontable one (#5802) Feb 20, 2019
CHANGELOG.md 0.12.0 Nov 27, 2014
CODE_OF_CONDUCT.md 0.35.1 Jan 19, 2018
CONTRIBUTING.md Update of documentation related to changes in docs.handsontable.com c… Jun 25, 2018
LICENSE.txt Refactor Walkontable table renderers (#6089) Jul 25, 2019
README.md Update "Build status" badge to CodeShipCI Feb 12, 2020
babel.config.js Add 3 proposals to babel config (#6335) Feb 3, 2020
handsontable-general-terms.pdf Handsontable one (#5802) Feb 20, 2019
handsontable-non-commercial-license.pdf Update non-commercial license (#6333) Oct 10, 2019
handsontable.d.ts Test if frame.frameElement is readable (#6479) Nov 20, 2019
hot.config.js 7.4.1 Feb 18, 2020
package-lock.json 7.4.2 Feb 19, 2020
package.json 7.4.2 Feb 19, 2020
webpack.config.js Upgrade to webpack@4 (#5912) Mar 28, 2019

README.md

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.

npm npm Build status FOSSA Status Known Vulnerabilities



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:

Documentation

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.

You can’t perform that action at this time.