handsontable

JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

Showing:

Popularity

Downloads/wk

82.6K

GitHub Stars

15.8K

Maintenance

Last Commit

17d ago

Contributors

123

Package

Dependencies

7

License

Type Definitions

Built-In

Tree-Shakeable

Yes?

Reviews

Average Rating

4.8/59
Read All Reviews

Top Feedback

4Performant
2Bleeding Edge
1Great Documentation
1Responsive Maintainers

Readme

Handsontable

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.

npm npm CI status FOSSA Status Known Vulnerabilities


Get Started with Handsontable

React  Angular  Vue    JavaScript 

Handsontable data grid

Features

The most popular features of Handsontable:

  ✓  Multiple column sorting
  ✓  Non-contiguous selection
  ✓  Filtering data
  ✓  Export to file
  ✓  Validating data
  ✓  Conditional formatting
  ✓  Merging cells
  ✓  Freezing rows/columns
  ✓  Moving rows/columns
  ✓  Resizing rows/columns
  ✓  Hiding rows/columns
  ✓  Context menu
  ✓  Comments

Documentation

Get Started

Install with npm

Run the following command in your terminal

npm install handsontable

You can also use Yarn, NuGet or load the bundle directly from jsDelivr.

Create a placeholder

Create an HTML placeholder

<div id="example"></div>

Import Handsontable and its stylesheet

import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';

Initialize the grid

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

Support

We provide support for developers working with commercial version via contact form or at support@handsontable.com.

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

Handsontable is a commercial software with two licenses available:

  • Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
  • Commercial license with support and maintenance included. See pricing plans.

License key

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

If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.



Proudly created and maintained by the Handsontable Team.

Rate & Review

Great Documentation1
Easy to Use0
Performant4
Highly Customizable0
Bleeding Edge2
Responsive Maintainers1
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Chris SpilkaGdynia, Poland7 Ratings0 Reviews
CEO at Handsontable
16 days ago
Performant
Great Documentation
Responsive Maintainers
Jeudi Prando AraujoCentro, Domingos Martins - ES31 Ratings8 Reviews
Resolvendo problemas com JavaScript
3 months ago
RN Kushwaha9 Ratings8 Reviews
Software Engineer
7 months ago
Mike HarveyNorthern VA1 Rating0 Reviews
7 months ago
Performant
Dashon 'DJ' HawkinsPhoenix, Arizona486 Ratings0 Reviews
Full-stack Javascript/Node.js developer, architect, & engineer in junior/mid role & CEO @GhettoGeek LLC; boutique, full-service digital agency downtown Phx, AZ.
8 months ago

Tutorials

No tutorials found
Add a tutorial