React 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
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.