@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

[12.3.0] - 2022-12-14

Added

• Added a new feature that lets you copy the contents of column headers by using 3 new context menu options: "Copy with headers", "Copy with group headers", and "Copy headers only". #2288
• Added 4 new API methods for copying column headers programmatically: copyCellsOnly(), copyWithColumnHeaders(), copyWithAllColumnHeaders(), and copyColumnHeadersOnly(). #2288
• Added missing TypeScript definitions of the CellCoords and CellRange classes, which are used in the arguments of some of the APIs. #9755
• Added missing TypeScript definitions for the following Handsontable hooks: beforeColumnFreeze, afterColumnFreeze, beforeColumnUnfreeze, and afterColumnUnfreeze. #9859

Fixed

• Fixed an issue where the UndoRedo plugin didn't work properly with preconfigured columns. #10108
• Fixed an issue where formulas inserted programmatically by using updateData() were not evaluated. #10011
• Fixed a regression where setting a column's type could overwrite other custom-defined settings. #10128
• Fixed an issue where Handsontable didn't render properly when initialized inside of a hidden container. #5322
• Fixed an issue of desynchronization between configuration options (cell meta) and Handsontable's data. The issue occurred when Handsontable's options were modified through the following hooks: beforeCreateRow, afterCreateRow, beforeCreateCol, and afterCreateCol. #10136
• Fixed an issue where comments added to fixed columns didn't display properly after scrolling. #9645
• Fixed an issue where typing in a dropdown editor caused the IME to disappear, resulting in wrong characters being typed. #9672
• React: Fixed an issue where dropdown cells weren't validated properly when using the HotColumn component. #10065

For more information on Handsontable 12.3.0, see:

• Blog post (12.3.0)
• Documentation (12.3)
• Release notes (12.3.0)