We just released Handsontable 11.1.0. This version adds Vue 3 support, fixes numerous bugs, and introduces a new method: updateData().

Vue 3 support

Until today, Handsontable offered wrappers for three of the most popular JavaScript frameworks: React, Angular, and Vue 2.

Handsontable 11.1.0 adds one more wrapper, dedicated specifically to Vue 3.

 

With Vue 3 as the new default just around the corner, we couldn’t think of a better time to start supporting it. But why create a separate wrapper?

Well, if you work with Vue or follow its development, you’re probably aware that the coming of Vue 3 was little short of a revolution. As for many other libraries, catching up required quite a few changes on our side. At the same time, we’re aware that many Vue developers are sticking with Vue 2, at least for the time being – that’s why we decided to split the Vue wrapper in two, and keep both Vue 2 and Vue 3 users happy.

Also, remember that since version 11.0.0, the framework wrappers can benefit from Handsontable’s modularization features. It’s no different with the new wrapper: you can use modules to optimize the size of your Vue 3 app and make your Handsontable experience even more efficient.

A new way to change Handsontable’s data: updateData()

There are a few different ways to change Handsontable’s data. For example:

• Using the updateSettings() method to change the data configuration option
• Using the setDataAtCell() method to change multiple cells at once
• Calling the alter() method
• Calling the loadData() method, to replace the data and reset the states of cells, rows and columns

In Handsontable 11.1.0, we’re adding a new one: updateData().

The updateData() method lets you replace your grid’s data, but keep the states of your cells, rows and columns intact. This means that the configuration options of your cells, rows and columns stay the same, including your cells’ formatting and readOnly states, and the order of your rows and columns.

To help you make the most of the new method, we also added two new hooks:

• beforeUpdateData
• afterUpdateData

Bugs fixed

Handsontable 11.1.0 brings numerous bug fixes as well. Removing events will no longer hamper Handsontable’s performance (#9044). The Comments plugin’s editor won’t disappear after adding a comment anymore (#9075). The CollapsibleColumns plugin will properly expand all collapsed columns. For more, check the release notes below.

Release notes: what we added

• Added updateData(), a new method that allows for replacing Handsontable’s data without resetting cells’ configuration options, rows’ states, and columns’ states. #7263
• Vue: Added Vue 3 support, by introducing a new wrapper. #7545

Release notes: what we changed

• Updated the TypeScript definition of the setDataAtCell() method. #8601
• Extended the Code Examples DeploymentGitHub Actions workflow, to allow for deploying code examples to GitHub Pages. #9058

Release notes: what we fixed

• Fixed an issue where the autocomplete editor’s suggestion list didn’t update properly. #7570
• Fixed an issue where nested headers didn’t render when data wasn’t defined. #8589
• Fixed some end-to-end tests that failed on mobile devices. #8749
• Fixed an issue where the rendered selection could get shifted by 1px. #8756
• Fixed an issue where the first column’s border didn’t display properly. #8767
• Fixed an issue where the CollapsibleColumns plugin’s expandAll() method didn’t expand collapsed columns. #8900
• Fixed end-to-end test scripts that occasionally crashed. #8961
• Fixed a typo in the valueAccordingPercent() helper. #9006
• Fixed an issue where the NestedRows plugin could throw a type error after calling the updateSettings() method. #9018
• Fixed an issue where performance was affected by removing events. #9044
• Fixed a wrong TypeScript definition of the MultiColumnSorting plugin’s sort() method. #9067
• Fixed an issue where the Comments plugin’s editor disappeared after adding a comment. #9075
• React: Fixed a wrong return type. #9000

You can find detailed release notes for this and previous Handsontable versions here.