Using Vue component for Cell Template/Cell Editor for DataTable widget

Is it possible to define cell-template/cell-editor using Vue component instead pure html

Hello @connectly,

Is it possible to define cell-template/cell-editor using Vue component instead pure html

It does seem possible to set the Vue component as a cell template by reusing the existing Vue component and setting it inside the specified HTML container.

Please take a look at the following example: Code Snippet.

The important part to note here is the initialization of the component inside the onAfterRender event handler - this is important because the UI gets redrawn each time the window gets resized, so we need to initialize the component once again each time. This is also true for any other cases where the datatable gets redrawn, for instance row/cell selection. As the UI gets redrawn, the component is also reset, please bear that in mind.

As for the cell editors, you can create custom editors of any complexity, with a custom logic attached to them. Theoretically, it shouldn’t be too difficult to implement such an editor using a custom Vue component (we also have past examples of users utilizing 3rd party libraries and their components as custom editors for datatable cells). If you could perhaps share the approximate implementation of the said component, we would be able to help out with a concrete example.

Thank You for your kind reply.

Following are the difficulties facing when initialize component inside onAfterRender event

  • It causes Vue error while mounting vue instance if column isn’t
    render due to virtualization
  • Handling of event becomes more complicated if component needs to
    communicate with parent component/page

And the actual use case must be → interacting any row/cell shouldn’t
reset
any other cell/ component

There isn’t any other way to use vue component which easily mixes
with webix widget