/ S

JavaScript Data Grid Migrate from 12.4 to 13.0

Migrate from Handsontable 12.4 to Handsontable 13.0, released on June 22, 2023.

In this article

Update to Angular 12 or higher

Handsontable 13.0 is not compatible with Angular 11 and lower.

Officially, Handsontable 13.0 supports only Angular 14-16. Handsontable 13.0 was thoroughly tested and, to the best of our knowledge, works correctly with versions down to Angular 12, but this may change with no further notice.

To use Handsontable 13.0 with Angular, you need to update at least to Angular 12, but we recommend using the latest version of Angular.

If you're having any issues with Handsontable's Angular wrapper, contact our technical support (opens new window) for help.

Stop using the beforeAutofillInsidePopulate hook

Handsontable 13.0 removes the beforeAutofillInsidePopulate (opens new window) hook, which has been marked as deprecated since Handsontable 9.0.0.

Make sure you're not using this hook.

Remove direction and deltas from your populateFromArray() calls

The populateFromArray() method no longer accepts direction and deltas arguments, as they were used only by the deprecated beforeAutofillInsidePopulate (opens new window) hook. Make sure that you don't pass these arguments to populateFromArray().

Change from getFirstNotHiddenIndex() to getNearestNotHiddenIndex()

Handsontable 13.0 removes the getFirstNotHiddenIndex() (opens new window) method, which has been marked as deprecated since Handsontable 12.1.0. Instead , use the new getNearestNotHiddenIndex() method.

For more details, see the API reference:

Before

handsontableInstance.getFirstNotHiddenIndex(0, 1, true, 1);

After

handsontableInstance.getNearestNotHiddenIndex(0, 1, true);

Replace 'insert_row' and 'insert_col' in your alter() calls

The alter() method no longer accepts 'insert_row' and 'insert_col' arguments, which have been marked as deprecated since Handsontable 12.2.0.

You can read more about this change on our blog (opens new window).

Before

// insert a row above row number 10
handsontableInstance.alter('insert_row', 10);

// insert a column before column number 10
handsontableInstance.alter('insert_col', 10);

After

// insert a row below the last row
handsontableInstance.alter('insert_row_below');

// insert a row above row number 10
handsontableInstance.alter('insert_row_above', 10);

// insert a column after the last column
handsontableInstance.alter('insert_col_end');

// insert a column before column number 10
handsontableInstance.alter('insert_col_start', 10);

The beforeChange hook is now fired before the afterSetDataAtCell and afterSetDataAtRowProp hooks

Handsontable 13.0 changes the order of execution for the following hooks:

For more details on this change, see this pull request: #10231 (opens new window).

Before

Up to Handsontable 12.4, the hooks were fired in the following order:

  1. afterSetDataAtCell or afterSetDataAtRowProp
  2. beforeChange

After

Since Handsontable 13.0, the hooks are fired in the following order:

  1. beforeChange
  2. afterSetDataAtCell or afterSetDataAtRowProp

←