Handsontable 16: New Angular Wrapper and Core Improvements

Handsontable 16.0.0 is now available, featuring an entirely rewritten Angular wrapper, a new textEllipsis option,  numerous under-the-hood improvements, and a DOM structure change for better accessibility.

To make your upgrade as smooth as possible, we’ve prepared a detailed migration guide.

New Wrapper for Angular

Version 16.0 introduces an entirely rewritten Angular wrapper for Handsontable, created to align with Angular’s latest architectural standards and offer an improved developer experience. If you’re working with Angular 16 or above, we recommend upgrading to the new wrapper to take advantage of improvements such as more idiomatic usage, easier maintenance, and better integration with Angular’s change-detection system.

Here’s why the new Angular wrapper is worth the switch:

• It’s built around Angular’s component-based approach, so you can now create custom editors and renderers as standard Angular components.
• You get stronger TypeScript support thanks to improved type definitions.
• The wrapper is restructured to use Angular’s standalone component model – no more NgModules. All public components are marked standalone: true, so you can import them directly without an extra module.
• Global configuration is easier to manage, thanks to a cleaner system built on Angular’s dependency injection.
• The template syntax is simpler and more readable, cutting down on boilerplate and making your configuration easier to maintain.
• You can now access the Handsontable instance directly using ViewChild.

The new wrapper is available as the @handsontable/angular-wrapper npm package and introduces significant API changes compared to the old @handsontable/angular package. We’ve done our best to clearly explain those changes in the migration guide to simplify your upgrade process. You’ll also find a new Angular section in our documentation with updated examples and guidance.

Please note that the old Angular wrapper @handsontable/angular is officially deprecated as of version 16 and will be removed in version 17.

New textEllipsis Feature

We’ve introduced a new built-in feature textEllipsis that helps keep your table layout clean and readable, even when some cells contain large amounts of text.

When textEllipsis is enabled, cells that have more content than can fit within their current width will automatically display an ellipsis (...) instead of overflowing text. This visual cue indicates there’s more content without disrupting the structure of your table.

This feature is available out of the box and can be enabled with a simple setting: textEllipsis as true.

You can apply it:

• Globally, to the entire table
• To specific rows
• Or to individual cells, depending on your layout needs

Second-Click Deselects Cells

You can now select multiple single cells, then hold Ctrl/Cmd and click any selected cell individually to remove it from the selection. 

Previously, this behavior required custom implementation. Now, it’s available natively and enabled by default for all users.

Updated DOM Structure

We’ve modified the underlying DOM to improve screen reader support and ensure capacity for future features, such as a pagination bar. The structural change consists of an extra <div> that entails the entire data grid.

Here’s what the new structure looks like:

Additional Changes

In this release, we also tackled a handful of browser-specific issues. We removed the horizontal scrollbar that appeared in the dropdown editor on Windows when using fractional display scaling. In Safari, we fixed styling inconsistencies with scrollbars to ensure a uniform UI across browsers.

You’ll also benefit from improved filter behavior. Adding a new column during an active filter session now updates the filter correctly, avoiding inconsistent results.

Release Notes

Added

• Breaking change: Added a focus outline to the context and dropdown menus. #11669
• Improved Handsontable editor positioning. #11593
• Added second-click cell deselection feature. #11602
• Added a new textEllipsis option. #11609
• Added backward compatibility for renamed CSS variables. #11676
• Angular: Introduced a new Angular wrapper – @handsontable/angular-wrapper. #11511

Changed

• Breaking change: Updated CSS theme variables and added --ht-radio-* variables. #11470
• Breaking change: Changed modifyData hook to use visual indexes for both rows and columns. #11501

Fixed

• Breaking change: Fixed an issue with custom border overlapping row headers. #11551
• Breaking change: Fixed accessibility issues and introduced a new DOM structure with a wrapper and a portal. #11579
• Fixed a problem with the dropdown editor having a horizontal scrollbar on Windows with fractional scaling applied. #11613
• Fixed an issue with scrollbar styles on the Safari browser. #11614
• Fixed column filter behavior when adding new columns. #11616
• Fixed an issue with the dropdown elements’ colors. #11661
• Angular: Fixed an error this.hotInstance.getSettings(...).columns?.filter is not a function in angular-wrapper. #11695

If you have any questions regarding this update, use one of the following support channels:

• Read the changelog in our documentation
• Start a discussion on the Developer’s Forum
• Ask a question on Stack Overflow
• Report an issue on GitHub discussions