Skip to content
Handsontable

Installation

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

Prerequisites

  • Node.js version 18 or newer
  • Angular CLI version 16 or newer: npm install -g @angular/cli

Install Handsontable

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

npm
npm install handsontable @handsontable/angular-wrapper
Yarn
yarn add handsontable @handsontable/angular-wrapper
pnpm
pnpm add handsontable @handsontable/angular-wrapper

Configure app.config.ts

In app.config.ts, register Handsontable’s modules and set global configuration values via the HOT_GLOBAL_CONFIG token. You can modify these values at any time using HotGlobalConfigService, or override them per table. All properties of HotGlobalConfig are optional.

import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import {
  HOT_GLOBAL_CONFIG,
  HotGlobalConfig,
  NON_COMMERCIAL_LICENSE,
} from "@handsontable/angular-wrapper";
import { registerAllModules } from "handsontable/registry";
import { registerLanguageDictionary, enUS } from "handsontable/i18n";


registerAllModules();
registerLanguageDictionary(enUS);


const globalHotConfig: HotGlobalConfig = {
  license: NON_COMMERCIAL_LICENSE,
  layoutDirection: "ltr",
  language: enUS.languageCode,
};


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

To reduce the size of your JavaScript bundle, import only the modules that you need instead of calling registerAllModules().

Use the HotTable Component

The main Handsontable component is called HotTableComponent. Import HotTableModule in your component and pass configuration via a GridSettings object:

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


@Component({
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class HotTableWrapperComponent {
  readonly data = [
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13],
    ["2022", 25, 20, 11, 14],
  ];
  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    height: "auto",
    autoWrapRow: true,
    autoWrapCol: true,
  };
}

Preview the result

TypeScript
/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';


@Component({
  selector: 'example-installation',
  standalone: true,
  imports: [HotTableModule],
  template: `<div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
    </div>`,
})
export class AppComponent {


  readonly data = [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13],
    ['2022', 25, 20, 11, 14],
  ];
  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
  };
}
/* end-file */






/* file: app.config.ts */
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { registerLanguageDictionary, enUS } from "handsontable/i18n";


registerLanguageDictionary(enUS);
registerAllModules();


const globalHotConfig: HotGlobalConfig = {
  license: NON_COMMERCIAL_LICENSE,
  layoutDirection: "ltr",
  language: enUS.languageCode,
};


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


/* end-file */
HTML
<div>
  <example-installation></example-installation>
</div>

Supported versions of Angular

@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.

Angular versionHandsontable wrapper
Older than 16@handsontable/angular (deprecated)
16 and newer@handsontable/angular-wrapper

Troubleshooting

If you’re using Angular 21 or newer, please note that older versions of @handsontable/angular-wrapper are incompatible due to recent breaking changes in Angular. To ensure smooth integration, upgrade to @handsontable/angular-wrapper@16.2 or later.

Server Side Rendering (SSR)

Currently, HotTable cannot be rendered on the server-side. If your application uses SSR, render it only in the browser using the @if control flow block.

import { isPlatformBrowser } from "@angular/common";
import { Component, inject, PLATFORM_ID } from "@angular/core";
import { GridSettings, HotTableModule } from "@handsontable/angular-wrapper";


@Component({
  standalone: true,
  selector: "app-root",
  imports: [HotTableModule],
  templateUrl: "./app.html",
  styleUrl: "./app.scss",
})
export class App {
  private platformId = inject(PLATFORM_ID);
  readonly isBrowser = isPlatformBrowser(this.platformId);


  readonly data = [
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13],
    ["2022", 25, 20, 11, 14],
  ];
  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    height: "auto",
    autoWrapRow: true,
    autoWrapCol: true,
    manualRowResize: true,
    manualColumnResize: true,
  };
}
<div>
  @if (isBrowser) {
    <hot-table [data]="data" [settings]="gridSettings" />
  }
</div>

Result

Handsontable is installed and running in your Angular application. You can now configure options or import only the modules you need to reduce your bundle size.

Related guides

Modules

Configuration options

maxCols
maxRows
minCols
minRows
minSpareCols
minSpareRows
startCols
startRows

Hooks

afterInit
beforeInit
beforeInitWalkontable
construct

Result

Handsontable is installed and ready to use in your project. Import it and create your first grid instance.