Rendering vue custom component inside columnDef

Rendering vue custom component inside columnDef

stsdatastsdata Posts: 4Questions: 2Answers: 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: 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

  • allanallan Posts: 63,210Questions: 1Answers: 10,415 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">
                <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

  • stsdatastsdata Posts: 4Questions: 2Answers: 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.