Angular Data Grid Installation

Angular Data GridInstallation

Install Handsontable through your preferred package manager, and control your grid through the HotTableComponent props.

On this page

Install Handsontable

To install Handsontable locally using a package manager, run one of these commands:

Import Handsontable's CSS

Import Handsontable's CSS into your application to styles.scss.

@import "handsontable/styles/handsontable.min.css";
@import "handsontable/styles/ht-theme-main.min.css";

Register Handsontable's modules

Import and register all of Handsontable's modules with a single function call (for example, in app.component.ts):

import Handsontable from "handsontable/base";
import { registerAllModules } from "handsontable/registry";

registerAllModules();

Or, to reduce the size of your JavaScript bundle, import only the modules that you need.

Configure global settings

You can set global configuration values for the table during the application setup (app.config.ts). Using the HOT_GLOBAL_CONFIG token, you can define an object that will be read within the wrapper. At any time, you can modify these values using the HotGlobalConfigService or override them at the individual table level.

import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import { provideRouter } from "@angular/router";

import { routes } from "./app.routes";
import {
  HOT_GLOBAL_CONFIG,
  HotGlobalConfig,
  NON_COMMERCIAL_LICENSE,
} from "@handsontable/angular-wrapper";

const globalHotConfig: HotGlobalConfig = {
  license: NON_COMMERCIAL_LICENSE,
  layoutDirection: "ltr",
  language: "en",
  themeName: "ht-theme-main",
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },
  ],
};

Use the HotTable Component

The main Handsontable component is called HotTableComponent. To use it, you need to import the HotTableModule in your component or module.

import {
  HotTableModule,
} from '@handsontable/angular-wrapper';

@Component({
  standalone: true,
  imports: [HotTableModule],
})

To set Handsontable's configuration options, use GridSettings object. For example:

import { Component, ViewChild } from "@angular/core";
import {
  GridSettings,
  HotTableComponent,
  HotTableModule,
} from "@handsontable/angular-wrapper";

@Component({
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table themeName="ht-theme-main" [data]="data" [settings]="gridSettings" />
  </div>`,
})
export class HotTableWrapperComponent {
  @ViewChild(HotTableComponent, { static: false })
  readonly hotTable!: HotTableComponent;

  readonly data = [
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13],
  ];
  readonly gridSettings = <GridSettings>{
    rowHeaders: true,
    colHeaders: true,
    height: "auto",
    autoWrapRow: true,
    autoWrapCol: true,
  };
}

TIP

@handsontable/angular-wrapper requires at least Angular@16. If you use a lower version of Angular, you can use the @handsontable/angular package instead.

For more information on @handsontable/angular, see the 15.3 documentation (opens new window).

Preview the result