We’re excited to announce the release of Handsontable 14.5.0. This update introduces significant enhancements, particularly in supporting the AZERTY keyboard layout and optimizing performance, especially for instances of the data grid that include merged cells.

This version is backward compatible, and we recommend updating to stay current.

You can read the full change log on this documentation page.

How to upgrade

• JavaScript npm install handsontable
• React npm install handsontable @handsontable/react
• Angular npm install handsontable @handsontable/angular
• Vue npm install handsontable @handsontable/vue3
• Download from NuGet
• View and clone on GitHub
• Import from public CDN: jsDelivr, UNPKG

Custom class names for column headers

With the new headerClassName option, you can now easily add one or more custom CSS classes to your column headers, separated by space. A good example of its use is to apply the built-in classes htLeft, htCenter, or htRight to align column names accordingly.

Settings object:

const hot = new Handsontable(container, {
  // other options
  columns: [
    { data: 1, type: 'text', headerClassName: 'htRight bold-text green' },
    { data: 2, type: 'text' }
  ]
});

CSS:

.bold-text {
  font-weight: bold;
}
.green {
  background: #37bc6c;
  font-weight: bold; 
}

See this code on StackBlitz: JavaScript demo / React demo

Performance boost for merged cells

We’ve received reports that when a data grid has many rows and columns, typically over 1000, and uses the merge cells feature, performance significantly decreases, making it difficult to use the table, scroll, and edit.

Taking this into account, in version 14.5, we have added (PR #10995) an improvement to boost rendering performance. The initial loading of 10,000 merged cells in the data grid is now approximately 1600 times faster, and each render cycle is 15 times faster.

Resolved issues

• Added support for other keyboard layouts besides QWERTY, e.g. AZERTY. #11027
• Added missing “this” typing for the ColumnSummary plugin. #11036
• Added Undo/Redo logic for the Sorting plugin. #11037
• Added new option headerClassName, which allows adding custom CSS classes to the column headers. #11076
• Improved the precision of calculating the height and width of columns and rows. #11049
• Fixed Context.getShortcuts type. #10910
• Improved performance of cell merging. #10995
• Improved the rendering performance. #11069
• Fixed a problem where clicking and dragging on cells in window-controlled scrolled instances would result in unpredictable behavior. #10996
• Fixed a bug that prevented column sorting of the checkbox cell types. #11004
• Fixed merged cells misalignment in overlays. #11007
• Fixed selection expansion for merged cells. #11010
• Fixed a problem where the table could go into an endless resize loop when one of the instance’s parents was using dvh values for sizing, and the table was not given any size itself. #11021
• Fixed a bug where the afterSetCellMeta was unnecessarily triggered after clicking on the comments textarea element. #11033
• Fixed invalid cell states after data population that was canceled in the beforeChange hook. #11035
• Fixed a problem with the Formulas plugin using wrong indexes when performing autofill. #11038
• Fixed a problem where disabling navigableHeaders broke keyboard navigation in the first row if the option was previously enabled and used. #11043
• Fixed a problem where the dropdown menu would not close after tapping on the table cells on mobile browsers. #11044
• Fixed the header selection with nestedHeaders enabled not working on mobile devices. #11051

We’ve got your back if you stumble across any problems updating. Just reach out on any of our officially supported channels:

• Start a discussion on Developer’s Forum
• Ask a question on Stack Overflow
• Report an issue on GitHub discussions

If your commercial support plan is active, contact our Support team at support@handsontable.com or use this contact form.