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.

Register Handsontable's modules

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

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.

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.

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

Preview the result

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 (opens new window).

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.