We are happy to announce that today we have released a new version of Handsontable. This version introduces a new feature called non-contiguous selection. It allows to select multiple, non-adjacent cells or ranges with mouse cursor or keyboard command. We also added new methods to the API making this feature a powerful tool. Read this tutorial to learn more.

Breaking changes

• Rewritten the PersistentState plugin to ES6 (#4618). From this version onward you can access the plugin like all regular plugins ( hot.getPlugin('persistentState')), not from the main instance ( the hot.storage object is now accesible from hot.getPlugin('persistentState').storage )
• Added a support for selecting non-contiguous cells or ranges (#4708). That required making changes of which some are backward incompatible (see below).

New API

• hot.getSelectedLast() Returns an array with coordinates of the last selected layer ([row, col, rowEnd, colEnd]). This method behaves as hot.getSelected() before the breaking change.
• hot.getSelectedRangeLast() Returns a CellRange object containing the last selection coordinates applied to the table. This method behaves as hot.getSelectedRange() before the breaking change.
• hot.alter('remove_row', [[1, 4], [10, 1]]) Supports removing non-contiguous rows. Instead of passing the row index, we can pass an array of arrays, where the first item is the index of the row and at the second item is the amount of rows to be removed;
• hot.alter('remove_col', [[1, 4], [10, 1]]) Same as above, but for the columns. Only “remove” actions support that new feature.

Breaking changes

• hot.getSelected() Returns an array of arrays with coordinates of the all layers ([[row, col, rowEnd, colEnd], [row, col, rowEnd, colEnd] ...]);
• hot.getSelectedRange() Returns an array of CellRange objects with coordinates of the all layers ([{CellRange}, {CellRange} ...]);
• Previously hot.selection.empty(), now hot.emptySelectedCells();
• Changed selection colors:
  • area borders, was #89aff9 -> is #4b89ff
  • area background, was #b5d1ff -> is #005eff
  • current selection border, was #5292f7 -> is #4b89ff
• Removed the multiSelect setting and replaced it with selectionMode: 'single';
• Added a new selectionMode option, which can be set either as single(previously as multiSelect: false), range (previously as multiSelect: true) or multiple (new non-contiguous mode);

Compatible changes

• afterSelection
  • previously: afterSelection(row, column, rowEnd, columnEnd, preventScrolling)
  • now: afterSelection(row, column, rowEnd, columnEnd, preventScrolling, selectionLayerLevel)
• afterSelectionByProp
  • previously: afterSelectionByProp(row, prop, rowEnd, propEnd, preventScrolling)
  • now: afterSelectionByProp(row, prop, rowEnd, propEnd, preventScrolling, selectionLayerLevel)
• afterSelectionEnd
  • previously: afterSelectionEnd(row, column, rowEnd, columnEnd)
  • now: afterSelectionEnd(row, column, rowEnd, columnEnd, selectionLayerLevel)
• afterSelectionEndByProp
  • previously: afterSelectionEndByProp(row, prop, rowEnd, propEnd)
  • now: afterSelectionEndByProp(row, prop, rowEnd, propEnd, selectionLayerLevel)

We’ve added a selectionLayerLevel argument for all the hooks listed above. The selectionLayerLevel is a number indicating which selection layer is currently being modified. For the first selection, this value is 0, with the new added layers this number increases.

Changes:

• Added an option to prevent row creation using the beforeCreateRowhook (#4749)
• Fixed a bug, where freezing and unfreezing the last column crashed the browser (#4642)
• Fixed a problem with unneeded rows being added when using Filtersalong with minRows or minSpareRows (#24)
• Added tests for the translation feature (#4723)

Follow us on Twitter to keep up to date with all updates on Handsontable.

We appreciate all of your suggestions that help us to improve Handsontable. You can leave a comment or write to us.