Handsontable 10.0.0: improved performance and consistency
We just released Handsontable 10.0.0. This version improves Handsontable’s performance, installation time, optimizes default settings, and more.
One of the biggest changes in Handsontable 10.0.0 is the improved performance of the
getCellMeta() method. Why? Because
getCellMeta() gets called very often from different parts of Handsontable’s source code, and its performance may impact the overall efficiency of your grid.
To achieve this, we introduced an additional cache layer that gets cleared once every slow render cycle. It worked like a charm:
|Use case||9.0.2||10.0.0||Times faster|
|“Bare” HoT example, with enabled headers||28.76 ms +-1%||26.05 ms +-1%||x1.10|
||82.57 ms +-0%||30.47 ms +-2%||x2.70|
||40.16 ms +-1%||27.33 ms +-1%||x1.46|
||34.18 ms +-1%||26.72 ms +-1%||x1.27|
We also tested calling
getCellMeta() on data sets of different sizes, and the results are great:
|Data set||9.0.2||10.0.0||Times faster|
|50×50||0.88 ms +-5%||0.84 ms +-5%||x1.04|
|200×100||6.06 ms +-3%||5.28 ms +-3%||x1.14|
|500×200||34.48 ms +-2%||26.88 ms +-3%||x1.28|
|8000×40||90.72 ms +-0%||81.53 ms +-0%||x1.11|
With some caveats, it’s fair to say that the bigger your data set, and the more complicated your
cells logic, the bigger the performance boost!
While working on the
getCellMeta() cache layer, we noticed an inconsistency in some of the related hooks:
afterRender. To clear things out, we decided to rename them, and add two new hooks along the way:
|Before (9.0.2)||After (10.0.0)|
Back in June, Handsontable started supporting HyperFormula, our standalone formula calculation engine. Since then, we released HyperFormula 1.1.0 (introducing array formulas), and HyperFormula 1.2.0. To let Handsontable users benefit from those changes, we now upgrade the HyperFormula dependency to
For Handsontable users (even those who don’t use HyperFormula), there’s one important change related to this. Because of the way npm treats optional dependencies (since version 7.0.0), the installation of HyperFormula’s GPU.js dependency could slow down the Handsontable installation process as a whole. To keep the Handsontable installation process as fast as possible, we decided to remove GPU.js from HyperFormula’s optional dependencies.
The bottom line is that now Handsontable installs faster, whether you’re using HyperFormula or not.
Optimized configuration options
After close consideration, we decided to change a few of Handsontable’s default configuration options.
First, we removed the default clipboard limits. Now, you can copy and paste an unlimited amount of rows (used to be 1000) and columns (used to be 1000).
Second, we changed the default values for the
autoWrapCol options, from
false. This is to prevent accidentally jumping to the last cell in the last column, when pressing the
Left arrow keys in the
A1 (0, 0) cell.
Third, we added default
color properties for all elements within the
.handsontable CSS class. This makes Handsontable look better out of the box.
As promised, we’re continuing to improve the Handsontable documentation. In the Handsontable 10.0.0 release, you’ll find that we rewrote a few guides from the ground up (e.g. Configuration options or Column summary), made numerous upgrades to various API reference sections, unified inline comments, fixed some long-overdue inaccuracies, expanded and added code examples, and more.
As we introduced a few backward-incompatible changes, we prepared a migration guide that takes you through upgrading from Handsontable 9 to Handsontable 10 step by step. You can check it out here.
Release notes: what we changed
- Unified the naming and description of the fourth argument,
controller, for selection manipulation in the
beforeOnCellMouseOverhooks. #4996 [breaking change]
- Changed what the
afterRenderhooks are, and when they are triggered. Added two new hooks:
afterViewRender. #6303 [breaking change]
- Changed the optional HyperFormula dependency from 0.6.2 to ^1.1.0, which introduces breaking changes for the
Formulasplugin users. #8502 [breaking change]
- Changed the default values for the
columnsLimitoptions of the
CopyPasteplugin. #8660 [breaking change]
- Added a default font family, size, weight and color. #8661 [breaking change]
- Changed the
autoWrapColoptions` default values from
>false. #8662 [breaking change]
- Improved the performance of the
- Improved the documentation and TypeScript definition of the
- Improved the arguments forwarding in the hooks. #8668
- Added a Github Actions workflow covering the testing of Handsontable and all of the wrappers. #8652
Release notes: what we fixed
- Fixed an issue of not resetting the date picker’s configuration. #6636
- An error won’t be thrown while inserting a new row for nested rows in a specific case. #7137
- Fixed a few problems with the
NestedRowsplugin, occurring with the
Formulasplugin enabled. #8048
- Fixed errors being thrown in the
Formulasplugin if a provided sheet name contained a dash character. #8057
- Fixed multiple bugs related to undo/redo actions while using the
- Fixed an issue where autofill was not able to be blocked/changed with the
beforeChangehook when the
Formulasplugin was enabled. #8107
- Data stored by the
NestedRowsplugin won’t be corrupted by some actions. #8180
- Collapsed parents won’t be expanded after inserting rows. #8181
- Fixed the cooperation of the dropdown menu and column sorting (menu closing on click). #8232
- Data won’t be corrupted anymore when some alterations are performed. #8614
- Adjusted directories and files related to
dataMap, to prevent potential circular references. #8704
- Improved the performance of the regular expression used to detect numeric values, and fixed major code smells. #8752
You can find detailed release notes for this and previous Handsonable versions here.