@handsontable/angular

Data Grid for Angular

Handsontable's wrapper for Angular combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.

---

Features

The most popular features of Handsontable for Angular:

  ✓  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

npm install handsontable @handsontable/angular

You can load it directly from jsDelivr as well.

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/angular/bundles/handsontable-angular.umd.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

The component will be available as Handsontable.angular.HotTable.

Usage

Use this data grid as you would any other component in your application. Options can be set as HotTable props.

Styles

@import '~handsontable/dist/handsontable.full.css';

Angular Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HotTableModule } from '@handsontable/angular';
 
@NgModule({
  imports: [
    BrowserModule,
    HotTableModule.forRoot()
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

Angular Component

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent  {
  data: any[] = [
    ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ],
}

Template

<hot-table [data]="data" [colHeaders]="true" [rowHeaders]="true" [width]="600" [height]="300"></hot-table>

View live demo

Support

We provide support for developers working with commercial version via contact form or at [e-mail].

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 for Angular 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.

Changelog

[14.5.0] - 2024-07-24

Added

• Added support for other keyboard layouts besides QWERTY (e.g. AZERTY). #11027
• Added missing "this" typing for the ColumnSummary plugin. #11036
• Added Undo/Redo logic for the ColumnSorting/ManualColumnSorting plugins. #11037
• Added new option headerClassName, which allows adding custom CSS classes to the column headers. #11076

Changed

• Improved the precision of calculating the height and width of columns and rows. #11049
• Improved the rendering performance. #11069

Fixed

• Fixed Context.getShortcuts type. #10910
• Improved performance of cell merging. #10995
• Fixed a problem where clicking and dragging on cells in window-controlled scrolled instances would result in unpredictable behavior. #10996
• Fixed a bug that prevented column sorting of the checkbox cell types. #11004
• Fixed merged cells misalignment in overlays. #11007
• Fixed selection expansion for merged cells. #11010
• Fixed a problem where the table could go into an endless resize loop when one of the instance's parents was using dvh values for sizing, and the table was not given any size itself. #11021
• Fixed a bug where the afterSetCellMeta was unnecessarily triggered after clicking on the comments textarea element. #11033
• Fixed invalid cell states after data population that was canceled in the beforeChange hook. #11035
• Fixed a problem with the Formulas plugin using wrong indexes when performing autofill. #11038
• Fixed a problem where disabling navigableHeaders broke keyboard navigation in the first row if the option was previously enabled and used. #11043
• Fixed a problem where the dropdown menu would not close after tapping on the table cells on mobile browsers. #11044
• Fixed the header selection with nestedHeaders enabled not working on mobile devices. #11051