React Data GridMigrating from 10.0 to 11.0
Migrate from Handsontable 10.0 to Handsontable 11.0, released on November 17, 2021.
Step 1: Register your modules
Starting with version 11.0.0, Handsontable's React wrapper supports modularization.
Using all modules
To continue using all Handsontable modules, register them with the new registerAllModules()
method.
In the entry point file of your application, add the following code:
// import the registerAllModules() method
import { registerAllModules } from 'handsontable/registry';
// register all Handsontable modules
registerAllModules();
Using individual modules
To see how to benefit from using individual Handsontable modules, see the Modules guide.
Step 2: Adapt to the type definition changes
In Handsontable 11.0.0, we reorganized the TypeScript definitions files, and improved the overall consistency of Handsontable's types.
For more details, see this pull request (opens new window).
TypeScript definitions files
Before
Before, all of Handsontable's TypeScript definitions were kept in one file, placed in the root directory: /handsontable.d.ts
.
The only way to import types was to get all of them by importing the Handsontable
package:
import Handsontable from 'handsontable';
Now
Now, each module has its own TypeScript definitions file. They're all kept in a new directory called types
: /handsontable/types
.
You can still import all of Handsontable's type definitions in the same as way as before. Additionally, you can also import individual modules from within the Handsontable package, with correct types:
import Handsontable from 'handsontable/base';
import { registerPlugin, HiddenRows } from 'handsontable/plugins';
Editors' interfaces
When improving the consistency of Handsontable's types, we needed to change the editors' interfaces.
Before
class CustomEditor extends Handsontable.editors.BaseEditor implements Handsontable._editors.Base ()
Now
class CustomEditor extends Handsontable.editors.BaseEditor implements Handsontable.editors.BaseEditor ()
Step 3: Adapt to the populateFromArray()
method's changes
The populateFromArray()
method works differently now, when its method
argument is set to shift_down
or shift_right
.
For more details, see this pull request (opens new window).
Before
populateFromArray()
performed a separatespliceRow
action for each populated row, and a separatespliceColumn
action for each populated column.- The
beforeChange
andafterChange
hooks were triggered multiple times, separately for each populated row and column. - The
beforeChange
andafterChange
hooks were triggered by eachspliceRow
andspliceColumn
action, with thesource
argument defined asspliceRow
orspliceCol
.
<HotTable
afterChange={(changes, source) => {
if (source === 'spliceRow' || source === 'spliceCol') {
handleChange(changes[0]);
}
}}
/>
Now
populateFromArray()
populates rows and columns with one large operation.- The
beforeChange
andafterChange
hooks are triggered only once, for all populated rows and columns. - The
beforeChange
andafterChange
hooks are triggered directly by thepopulateFromArray()
method, with thesource
argument defined aspopulateFromArray
.
<HotTable
afterChange={(changes, source) => {
if (source === 'populateFromArray') {
changes.forEach(change => handleChange(change))
}
}}
/>