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

edited September 4 in Technical questions

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



  • edited September 10

    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:

    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.

  • edited September 13

    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
    any other cell/ component

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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!