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.
Performance boost
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:
As you can see, the exact performance gain depends on whether you’re using the cells
configuration option, the beforeGetCellMeta
hook, and/or the afterGetCellMeta
hook:
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 |
Using the cells option |
82.57 ms +-0% | 30.47 ms +-2% | x2.70 |
Using the beforeGetCellMeta hook |
40.16 ms +-1% | 27.33 ms +-1% | x1.46 |
Using the afterGetCellMeta hook |
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!
For more details about the getCellMeta()
changes, see this pull request.
Hook changes
While working on the getCellMeta()
cache layer, we noticed an inconsistency in some of the related hooks: beforeRender
and 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) |
---|---|
beforeRender |
beforeViewRender |
afterRender |
afterViewRender |
– | beforeRender |
– | afterRender |
Faster installation
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 ^1.2.0
.
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 autoWrapRow
and autoWrapCol
options, from true
to false
. This is to prevent accidentally jumping to the last cell in the last column, when pressing the Up
and Left
arrow keys in the A1 (0, 0)
cell.
Third, we added default font-family
, font-size
, font-weight
, and color
properties for all elements within the .handsontable
CSS class. This makes Handsontable look better out of the box.
Improved documentation
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.
Migration guide
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 thebeforeOnCellMouseDown
andbeforeOnCellMouseOver
hooks. #4996 [breaking change] - Changed what the
beforeRender
andafterRender
hooks are, and when they are triggered. Added two new hooks:beforeViewRender
andafterViewRender
. #6303 [breaking change] - Changed the optional HyperFormula dependency from 0.6.2 to ^1.1.0, which introduces breaking changes for the
Formulas
plugin users. #8502 [breaking change] - Changed the default values for the
rowsLimit
andcolumnsLimit
options of theCopyPaste
plugin. #8660 [breaking change] - Added a default font family, size, weight and color. #8661 [breaking change]
- Changed the
autoWrapRow
andautoWrapCol
options` default values fromtrue
to>false
. #8662 [breaking change] - Improved the performance of the
getCellMeta()
method. #6303 - Improved the documentation and TypeScript definition of the
selectOptions
option. #8488 - 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
NestedRows
plugin, occurring with theFormulas
plugin enabled. #8048 - Fixed errors being thrown in the
Formulas
plugin if a provided sheet name contained a dash character. #8057 - Fixed multiple bugs related to undo/redo actions while using the
Formulas
plugin. #8078 - Fixed an issue where autofill was not able to be blocked/changed with the
beforeChange
hook when theFormulas
plugin was enabled. #8107 - Data stored by the
NestedRows
plugin 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.