Rendering vue custom component inside columnDef
Rendering vue custom component inside columnDef
stsdata
Posts: 4Questions: 2Answers: 0
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.
Answers
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.:
If you are having problems with it, perhaps you can use StackBltiz to create a demo showing the issue.
Allan
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.