JavaScript Data Grid Migrating from 10.0 to 11.0

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

In this article

• Step 1: React, Angular, Vue – register your modules
  • Using all modules
  • Using individual modules
• Step 2: Adapt to the type definition changes
  • TypeScript definitions files
  • Editors' interfaces
• Step 3: Adapt to the populateFromArray() method's changes

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

• Using modules with React
• Using modules with Angular
• Using modules with Vue

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

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

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