# Migrating from 10.0 to 11.0

To upgrade your Handsontable version from 10.x.x to 11.x.x, follow this guide.

# Step 1: React, Angular, Vue – register your modules

Starting with Handsontable 11.0.0, the React wrapper, the Angular wrapper, and the Vue wrapper support modularization.

If you don't use any of the wrappers, you don't need to change anything.

# Using all modules

To continue using all Handsontable modules with your wrapper, register all modules 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 start using individual Handsontable modules with your wrapper, see the following guides:

# Step 2: Adapt to the TypeScript definitions file changes

Before, all of Handsontable's TypeScript definitions were kept in one huge file, placed in the root directory: ./handsontable.d.ts.

Now, each module has its own TypeScript definitions file. They're all kept in a new types directory: ./handsontable/types (opens new window).

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

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

# 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 were triggered multiple times, separately for each populated row and column.
  • The beforeChange and afterChange hooks were triggered by each spliceRow and spliceColumn action, with the source argument defined as spliceRow or spliceCol.
new Handsontable(element, {
  afterChange: (changes, source) => {
    if (source === 'spliceRow' || source === 'spliceCol') {
      handleChange(changes[0]);
    }
  }
});

# Now

new Handsontable(element, {
  afterChange: (changes, source) => {
    if (source === 'populateFromArray') {
      changes.forEach(change =>  handleChange(change))
    }
  }
});

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