Handsontable 10.0.0: improved performance and consistency

Jakub Wiśniewski Release Notes / September 29, 2021

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:

getCellMeta calls performance comparison

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:

getCellMeta calls performance comparison

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-familyfont-sizefont-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 the beforeOnCellMouseDown and beforeOnCellMouseOver hooks. #4996 [breaking change]
  • Changed what the beforeRender and afterRender hooks are, and when they are triggered. Added two new hooks: beforeViewRender and afterViewRender#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 and columnsLimit options of the CopyPaste plugin. #8660 [breaking change]
  • Added a default font family, size, weight and color. #8661 [breaking change]
  • Changed the autoWrapRow and autoWrapCol options` default values from true 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 the Formulas 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 the Formulas 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.