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 markedstandalone: 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:
body
├── #example // Root Wrapper
│ └── .ht-root-wrapper // Root Element
│ ├── .htFocusCatcher // Focus Catcher (top)
│ ├── .ht-wrapper.handsontable // Root Container
│ │ └── Data grid content
│ ├── .htFocusCatcher // Focus Catcher (down)
│ ├── .hot-display-license-info // License key notification bar
│ ├── Future: Status bar
│ └── Future: Pagination bar
└── .ht-portal // Portal Element
└── Context menus, dropdowns, pop-ups, sidebars
(absolutely positioned elements)
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
inangular-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
If your commercial support plan is active, our dedicated tech support team is ready to help – just email support@handsontable.com or use this contact form for assistance.