Migrating from 10.0 to 11.0

Migrate from Handsontable 10.0 to Handsontable 11.0, released on November 17, 2021.

More information about this release can be found in the 11.0.0 release blog post.
For a detailed list of changes in this release, see the Changelog.

1. Adapt to the type definition changes

   In Handsontable 11.0.0, Handsontable reorganizes the TypeScript definitions files and improves the overall consistency of the types.

   For more details, see this pull request.

   TypeScript definitions files

   Before

   Before, all TypeScript definitions were kept in one file 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

   Handsontable 11.0.0 changes the editors’ interfaces to improve type consistency.

   Before

   class CustomEditor extends Handsontable.editors.BaseEditor implements Handsontable._editors.Base ()

   Now

   class CustomEditor extends Handsontable.editors.BaseEditor implements Handsontable.editors.BaseEditor ()

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

   Before

   • populateFromArray() performed a separate spliceRow action for each populated row, and a separate spliceColumn action for each populated column.
   • The beforeChange and afterChange hooks trigger multiple times, separately for each populated row and column.
   • The beforeChange and afterChange hooks trigger for each spliceRow and spliceColumn action, with the source argument defined as spliceRow or spliceCol.

   Now

   • populateFromArray() populates rows and columns with one large operation.
   • The beforeChange and afterChange hooks are triggered only once, for all populated rows and columns.
   • The beforeChange and afterChange hooks are triggered directly by the populateFromArray() method, with the source argument defined as populateFromArray.

Result

Your application now runs on Handsontable 11.0.