Rendering vue custom component inside columnDef

stsdata

Hi all,

I'm trying to render one of my custom vue components inside the columnDefs of the table, right now i'm doing this:

 {
    targets: 3,
    render: function (data, type) {
      if (type === "display") {
        return `<span>${data}</span>`;
      }
      return data;
    }
  } 

what i'm trying to achieve is to change that span into my custom component.

I've tried following this post: https://datatables.net/forums/discussion/74128/how-add-action-button-on-vue3-component and also https://datatables.net/manual/vue#Slot-properties, but still i'm not sure that what i'm trying is actually doable.

allan

To use a Vue component inside a cell, you need to use a slot. At the moment you are just returning a string.

The Vue documentation you linked to is how to do it - e.g.:

        <template #column-1="props">
            <MyComponent>
               ${props.cellData}
            </MyComponent>
        </template>

If you are having problems with it, perhaps you can use StackBltiz to create a demo showing the issue.

Allan

stsdata

Unfortunately, I'm afraid I wasn't clear enough in my question, I apologize. Actually, my problem lies in the fact that I have a Vue component within which I define the Datatables table. I pass that object I showed in my question to this component via props, which then uses columnDefs to define a specific column of Datatables. The goal would be to pass my component directly instead of the <span> that I currently use.