Today we’ve released version 4.1.0 of our Handsontable for Vue wrapper, which provides a deeper integration with the Vue.js framework. As such, it contains a few notable improvements. To start with, it is now possible to configure Handsontable in a declarative way.

Before:

<hot-table :settings="{
  rowHeaders: true,
  colHeaders: true,
  columns: [
    {
      width: 150,
      readOnly: true
      renderer: function() {
        // renderer logic here
      }
    },
    {
      width: 100,
      editor: SomeEditorClass
    }
  ]
}">
</hot-table>

Now:

<hot-table :settings="{rowHeaders: true, colHeaders: true}">
  <hot-column :settings="{width: 150, readOnly: true}">
    <some-renderer-component hot-renderer></some-renderer-component>
  </hot-column>
  <hot-column :width="100">
    <some-editor-component hot-editor></some-editor-component>
  </hot-column>
</hot-table>

It also includes a highly requested new feature: the ability to create custom editors and renderers using Vue components. Furthermore, you can use the editing/rendering components with Vue’s state management (e.g. Vuex). Finally, a component can be created to be used as both an editor and a renderer.

The example below uses vue-color, a color-picker, and shows how easy it is to take an awesome external component and use it inside Handsontable
(see the documentation for more details).

New feature

• We’ve introduced the <hot-column> component and the ability to use Vue components as Handsontable editors and renderers. The <hot-column> component allows declaring column-related Handsontable settings by passing them as its props, or, in case of component-based editors and renderers, as its children. For more information on the subject, see this GitHub issue.

Bug fixes

• Fixed a problem with Handsontable passing too many properties to the update function, which resulted in the table not working properly after a change was observed in some of the props. (#108)
• Fixed a problem where the hook callbacks did not have access to the Handsontable instance from the <hot-table> component. (#119)

Follow us on Twitter to keep up with news and updates.

Leave a comment below or write to us if you have any questions.