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.

 

 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

 

Installation

 

Below is the installation guide for the Angular wrapper. If you're using a different framework, please refer to its dedicated wrapper for specific installation instructions.

 

• React functional component
• React class component
•    Vue

 

---

 

Install Handsontable from npm or Yarn.

npm install handsontable @handsontable/angular-wrapper

 

Import CSS files

Import Handsontable's CSS into your application's 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 { registerAllModules } from 'handsontable/registry';

registerAllModules();

 

Import the HotTableModule

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

 

@Component({

  standalone: true,

  imports: [HotTableModule],})

 

Use the HotTable component

import {

  GridSettings,

  HotTableComponent,

  HotTableModule,} from "@handsontable/angular-wrapper";

 

@Component({

  standalone: true,

  imports: [HotTableModule],

  template: `        `,})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"

  };}

 

 

Resources

Website

Demo

Documentation

npm

CDN

Forum

Blog

Contact support team

 

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!

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 via email or use our contact form.

 

 

License Key

 

For projects covered by the 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. 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.