@handsontable/angular-wrapper

The official Angular 16+ wrapper for Handsontable.
JavaScript Data Grid with a spreadsheet-like look and feel.

With its spreadsheet-like editing features, it's perfect for building data-rich internal apps. It allows users to enter, edit, validate, and process data from various sources. Common use cases include resource planning software (ERP), inventory management systems, digital platforms, and data modeling applications.

Website   —   Documentation   —   Themes   —   API   —   Community

Key Features

    Built-in themes
    Flexible API
    Virtualization
    IME support
    Internationalization
    RTL support
    Accessibility
    Keyboard shortcuts
    Sorting data
    Filtering data
    400 built-in formulas
    Configurable selection
    Data validation
    Conditional formatting
    Merged cells
    Pinned/frozen columns
    Hiding columns
    Right-click context menu
    Row pagination
    Server-side data
    Notifications
    Export to Excel

npm install handsontable @handsontable/angular-wrapper

import { registerAllModules } from 'handsontable/registry';

registerAllModules();

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

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

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

@Component({
  standalone: true,
  imports: [HotTableModule],
  template: `
      <hot-table [data]="data" [settings]="gridSettings" />
  `,
})
export class HotTableWrapperComponent {
  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,
    licenseKey: "non-commercial-and-evaluation"
  };
}

Lazy loading with @defer (Angular 17+)

HotTableComponent is a standalone component and works with Angular's built-in @defer block out of the box — no extra configuration required.

Recommended pattern

import { Component, signal } from '@angular/core';
import { HotTableComponent } from '@handsontable/angular-wrapper';

@Component({
  standalone: true,
  imports: [HotTableComponent],
  template: `
    <button (click)="show.set(true)">Load grid</button>

    @defer (when show()) {
      <hot-table [data]="data" [settings]="settings"></hot-table>
    } @placeholder {
      <p>Click the button to load the grid.</p>
    } @loading (minimum 300ms) {
      <p>Loading…</p>
    } @error {
      <p>Failed to load the grid.</p>
    }
  `,
})
export class PageComponent {
  show = signal(false);
  data = [['Alice', 'has'], ['Bob', 'data']];
  settings = { rowHeaders: true, colHeaders: ['Name', 'Note'] };
}

How it works

Other trigger options

<!-- on viewport — loads when the placeholder scrolls into view -->
@defer (on viewport) { <hot-table …> }

<!-- on interaction — loads on first click/focus inside the placeholder -->
@defer (on interaction) { <hot-table …> }

<!-- on idle — loads during browser idle time -->
@defer (on idle) { <hot-table …> }

Important: registerAllModules()

Call registerAllModules() in app.config.ts before the deferred block triggers — it is synchronous and must run before any Handsontable instance is created. The recommended place is at module level, outside any component:

// app.config.ts
import { registerAllModules } from 'handsontable/registry';
registerAllModules(); // runs once at app startup, safe with @defer

Themes

Handsontable themes control how your data table looks: colors, spacing, typography, borders, and overall visual style.

You get three built-in themes out of the box:

• main – modern, clean, default choice
• horizon – lighter, spacious feel
• classic – traditional spreadsheet look

Each theme supports:

• ️Light mode
• Dark mode

Custom Themes

You can style Handsontable to match your product's visual identity by creating a custom theme. Use the Theme API to extend a built-in theme and apply your own styling while keeping support for light/dark modes and density settings.

To stay aligned with design, you can rely on the:

• Theme Builder
• Handsontable Design System

Resources

• Website
• Demo
• Documentation
• npm
• CDN
• Forum
• Blog
• Contact support team
• Get a quote

Is Handsontable a Data Grid or a Spreadsheet?

Handsontable is a data grid component written in JavaScript, not a spreadsheet. However, it brings in many features typically found in spreadsheet software. We designed it this way because spreadsheet-like patterns are often the most user-friendly when it comes to data entry and management.

Spreadsheet-like features in Handsontable:

• Keyboard shortcuts compliant with either Google Sheets or Excel
• 400 spreadsheet formulas via native integration with HyperFormula
• Keyboard navigation across headers that can be disabled, making only cells navigable
• TAB navigation across cells that can be disabled
• Built-in undo-redo functionality
• Powerful clipboard capabilities for copy-paste operations
• Ability to scroll the grid within the container (div) or window
• Data binding in the form of an array of objects or arrays of arrays
• Built-in cell editors like a date picker or dropdown list

At first glance, it might seem that a data table, spreadsheet, and data grid are just different names for the same thing - an interactive table displaying data. In reality, these tools serve different purposes and offer distinct functionalities, designed to meet specific needs. Handsontable sits comfortably in the data grid category while incorporating many of the best aspects of spreadsheet software.

Support

We're here to help!

If you're using Handsontable with a free, non-commercial license, you can:

• Join the conversation on GitHub Discussions to share ideas, suggest features, or discuss changes.
• Report any bugs you find on our GitHub Issue Board.
• Connect with other developers and find answers on our Developer Forum.

If you have a commercial license, feel free to contact us directly at support@handsontable.com or use our contact form.

Licenses

Handsontable is available under two licensing options, allowing you to choose the one that best fits your needs. Each license comes with its own terms and conditions, as outlined below:

① Free license for non-commercial use, and evaluation purposes

This license is available for non-commercial purposes such as teaching, academic research, or evaluation. It allows you to use Handsontable free of charge under the terms specified in the non-commercial license agreement. Learn more here.

② Commercial license

For commercial use, a paid license is required. This license includes support and maintenance to ensure you get the most out of Handsontable. The commercial license can be purchased directly from Handsoncode or through an authorized reseller. See the pricing page for details.

License Key

For projects covered by the free non-commercial license, simply use the phrase 'non-commercial-and-evaluation' as your license key.

If you're using Handsontable in a project that supports commercial activities, you'll need to purchase a license key at handsontable.com/pricing. You can find more details in our documentation.

Contributing

Contributions are welcome, but before you make them, please read the Contributing Guide and accept the Contributor License Agreement.

Created and maintained by the Handsontable Team

2012 - 2025 Handsoncode