Handsontable

A JavaScript/HTML5 data grid with spreadsheet look & feel

SpreadsheetAngularReactVue
handsontable/handsontablehandsontable.comhandsontable

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 Quality Gate Status

Get Started with Handsontable


React  Angular  Vue  Vue 3    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


- Developer guides
- API Reference
- Changelog
- Demo


Get Started

Install with npm


Run the following command in your terminal
  1. ```
  2. npm install handsontable
  3. ```

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

Create a placeholder


Create an HTML placeholder

  1. ``` html
  2. <div id="example"></div>
  3. ```

Import Handsontable and its stylesheet
  1. ``` js
  2. import Handsontable from "handsontable";
  3. import 'handsontable/dist/handsontable.full.css';
  4. ```

Initialize the grid


Now turn your placeholder into a data grid with sample data.
  1. ``` js
  2. const data = [
  3.   ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
  4.   ['2019', 10, 11, 12, 13],
  5.   ['2020', 20, 11, 14, 13],
  6.   ['2021', 30, 15, 12, 13]
  7. ];

  9. const container = document.getElementById('example');
  10. const hot = new Handsontable(container, {
  11.   data: data,
  12.   rowHeaders: true,
  13.   colHeaders: true
  14. });
  15. ```

Support


We provide support for developers working with commercial version via [contact form](https://handsontable.com/contact?category=technical_support) 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.