Rendering vue custom component inside columnDef

Rendering vue custom component inside columnDef

stsdatastsdata Posts: 2Questions: 1Answers: 0
edited May 14 in DataTables 2

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: and also, but still i'm not sure that what i'm trying is actually doable.


  • allanallan Posts: 62,082Questions: 1Answers: 10,178 Site admin
    edited May 15

    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">

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


  • stsdatastsdata Posts: 2Questions: 1Answers: 0

    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.

Sign In or Register to comment.