Handsontable 14.5.0: Improved performance and flexible column header class
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.