Accessing arbitrary attributes on a <template> tag

[AllanJard]

Hi - I'm the author of DataTables and I'm working on an integration for DataTables with Vue. I can render a table no problem, but the part I'm struggling with is displaying components in cells of the table. I've got a solution to that by defining name slots, assigning that to a column in DataTables, and then creating an element and rendering it (h / render from Vue). You can see that here.

That looks like this:

  <DataTable>
    <template #column-render-action="props" test="allan">
      <Button :text="`Row id: ${props.cellData}`" @click="rowClick(props.rowData)"></Button>
    </template>
  </DataTable>

That works, but I want to be able to control the data being returned from my function there. If I could access arbitrary attributes from the <template> (e.g. the `test attribute above), then that would work well.

I've created this little test case as a simple version of that. I am fully aware that my example is not the way to do what the example is doing, but it is the simplest that I could break it down to act as a test case without all the other code!

The other option I thought of would be do something like:

  <DataTable>
    <Column target="action">
      <Button :text="`Row id: x`" @click="rowClick(1)"></Button>
    </Column>
  </DataTable>

But I don't know how I would access the child component and assign it to a column renderer in DataTables (for use in every cell for that column). My understanding is that slots would be better suited for this sort of thing? Although I do prefer that markup.

Any suggestions / advice from the Vue wizards would be very welcome.

Thanks,
Allan

[AllanJard]

I'd really welcome any insight anyone can offer into this?

[mrorabau]

First, full disclaimer, I am no Vue wizard, so any of the things I write here could be complete junk:

1. Probably minor, but I suspect you are supposed to use useSlots() over getCurrentInstance().slots
2. I think v-slot:name is supposed to be used/preferred for templates
3. I was able to get the props to the children in a slot, but not to the template itself.

I think you could work around this using your own custom components and using a default slot (more like your second example, which I also like better). I'm not sure this example does precisely what you were looking for, and it is obviously written kinda poorly/quickly, but hopefully it is helpful:

StackBlitz Example

[mrorabau]

Oh, make sure you look at the console for the output.

[AllanJard]

@mrorabau Thank you so much for taking the time to reply and build the example - I really appreciate it! I've updated my Vue component for DataTables in such a way that I don't need to read attributes from the template tag, but it took this example and some experimenting for me to see how it could be done using the orthogonal data options in DataTables.

For anyone interested, this is the relevant section in the DataTables documentation.