It provides easy data binding, data validation, filtering, sorting and CRUD operations.
Use npm to install the latest version.
npm install handsontable
Create a placeholder - an HTML element holding a place for a data grid.
Import Handsontable and its stylesheet.
Alternatively, you can simply embed it in your HTML file.
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;const hot = containerdata: datarowHeaders: truecolHeaders: true;
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
- Auto-fill option
Use one of the available wrappers to use Handsontable with your favorite framework:
Support and contribution
If you would like to contribute to this project, make sure you first read the guide for contributors.
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.
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|
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 = containerdata: datarowHeaders: truecolHeaders: truelicenseKey: '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.