React Data Grid Migrate from 9.0 to 10.0

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

In this article

• 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:

• beforeRender
• afterRender
• beforeViewRender
• afterViewRender

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:

• ColumnSorting
• MultiColumnSorting
• ManualColumnMove
• ManualRowMove
• NestedHeaders

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.