JavaScript Data Grid Migrating from 9.0 to 10.0

JavaScript Data GridMigrate from 9.0 to 10.0

Migrate from Handsontable 9.0 to Handsontable 10.0, released on September 29, 2021.

Step 1: Rename your Handsontable hooks
Step 2: Adapt to the HyperFormula dependency update
Step 3: Adapt to the configuration options' new default values
Step 4: Adapt to the Handsontable hooks changes
Step 5: Adapt to the font changes

Step 1: Rename your Handsontable hooks

If you use the beforeRender or afterRender Handsontable hooks, update their names in your app (#8632 (opens new window)).

Before	After
`beforeRender`	`beforeViewRender`
`afterRender`	`afterViewRender`

There are still Handsontable hooks that are named beforeRender and afterRender, but they do completely new things now. For more details, see the Handsontable 10.0 API reference:

Step 2: Adapt to the HyperFormula dependency update

In Handsontable 10.0.0, we updated the optional HyperFormula dependency from 0.6.2 to ^1.1.0 (#8669 (opens new window)).

For more details on the breaking changes between HyperFormula 0.6.x and HyperFormula 1.0.x, see the migration guide (opens new window).

Step 3: Adapt to the configuration options' new default values

In Handsontable 10.0.0, we changed the default values of the autoWrapCol and autoWrapRow configuration options, from true to false (#8662 (opens new window)):

Before	After
`autoWrapCol: true`	`autoWrapCol: false`
`autoWrapRow: true`	`autoWrapRow: false`

We also changed the default values for the rowsLimit and columnsLimit options of the CopyPaste plugin, from 1000 to Infinity (#8676 (opens new window)):

Before	After
`rowsLimit: 1000`	`rowsLimit: Infinity`
`columnsLimit: 1000`	`columnsLimit: Infinity`

Step 4: Adapt to the Handsontable hooks changes

In Handsontable 10.0, we unified the naming of an argument used by the beforeOnCellMouseDown and beforeOnCellMouseOver Handsontable hooks (#8591 (opens new window)):

Handsontable hook	Before	After
`beforeOnCellMouseDown`	`blockCalculations`	`controller`
`beforeOnCellMouseOver`	`blockCalculations`	`controller`

In both cases, the renamed controller object now has a cell property, instead of a cells property:

`blockCalculations` (before)	`controller` (after)
`row` `column` `cells`	`row` `column` `cell`

This change affects the following plugins:

For more details, see this PR (opens new window).

Step 5: Adapt to the font changes

To make Handsontable look good right out of the box, we added default font-family, font size, font weight, and color properties for all elements within the .handsontable CSS class (#8681 (opens new window)). If you're not overwriting these properties in your app, this change will affect your grid's font.