/handsontable-mit

Handsontable - JavaScript/HTML5 Data Grid Component with Spreadsheet Look & Feel. Available for React, Vue and Angular.

Primary LanguageJavaScriptOtherNOASSERTION

Handsontable logo

Handsontable is an open source JavaScript/HTML5 data grid component with spreadsheet look & feel. It easily integrates with any data source and comes with a variety of useful features like data binding, validation, sorting or powerful context menu. It is available for Vue, React and Angular.

npm npm Build status npm

Table of contents

  1. What to use it for?
  2. Installation
  3. Basic usage
  4. Examples
  5. Features
  6. Screenshot
  7. Resources
  8. Wrappers
  9. Support
  10. Contributing
  11. Community
  12. License

What to use it for?

The list below gives a rough idea on what you can do with Handsontable CE, but it shouldn't limit you in any way:

  • Database editing
  • Configuration controlling
  • Data merging
  • Team scheduling
  • Sales reporting
  • Financial analysis

Installation

There are many ways to install Handsontable, but we suggest using npm.

Community Edition:

npm install handsontable

Handsontable Pro:

npm install handsontable-pro

Basic usage

Assuming that you have already installed Handsontable, create an empty <div> element that will be turned into a spreadsheet:

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

In the next step, pass a reference to that <div> element into the Handsontable CE constructor and fill the instance with sample data:

const data = [
  ["", "Tesla", "Volvo", "Toyota", "Honda"],
  ["2017", 10, 11, 12, 13],
  ["2018", 20, 11, 14, 13],
  ["2019", 30, 15, 12, 13]
];

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});

Examples

Features

Some of the most popular features include:

Community Edition Handsontable Pro
Sorting data Filtering
Validating data Export to file
Conditional formatting Dropdown menu
Merging cells Nested headers
Custom cell types Collapsing columns
Freezing rows/columns Multiple Column Sorting
Moving rows/columns Hiding rows
Resizing rows/columns Hiding columns
Context menu Trimming rows
Comments Column summary
Auto-fill option Header tooltips
Non-contiguous selection Binding rows with headers

Screenshot

Handsontable Pro Screenshot

Resources

Wrappers

Handsontable comes with wrappers and directives for most popular frameworks:

Support

You can help us in developing this project by making pull requests and reporting issues.

If you have an active support package for Handsontable Pro then write to us at support/at/handsontable.com or through the contact form.

Contributing

If you would like to help us to develop Handsontable, please take a look at this guide for contributors.

Community

License

Handsontable Community Edition is released under the MIT license but some of the plugins (Pro) are distributed under the commercial license. See the table below for details.

Name Localization
Bind rows with headers /src/plugins/bindRowsWithHeaders
Collapsing columns /src/plugins/collapsibleColumns
Summary calculations /src/plugins/columnSummary
Dropdown menu /src/plugins/dropdownMenu
Export to file /src/plugins/exportFile
Filtering /src/plugins/filters
Formula support /src/plugins/formulas
Gantt Chart /src/plugins/ganttChart
Header tooltips /src/plugins/headerTooltips
Hiding columns /src/plugins/hiddenColumns
Hiding rows /src/plugins/hiddenRows
Multi-column sorting /src/plugins/multiColumnSorting
Nested headers /src/plugins/nestedHeaders
Nested rows /src/plugins/nestedRows
Trimming rows /src/plugins/trimRows

License key

Handsontable Pro requires passing a valid license key in the configuration section. You can find your purchased license key in your account at my.handsontable.com.

An example of what the configuration object should look like:

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

Note that the license key is passed as a string so you need to wrap it in quotes ('').


Copyrights belong to Handsoncode sp. z o.o.