Other Vue components used in template are rendered but not reacting

[Namoshek]

Hi, thanks for the wrapper library!

I'm trying to use the popover component from the Bootstrap 3 Vue library in one of my column templates. The column, i.e. the button, is rendered correctly. But the click handler is not working.

<template slot="somecolumn" slot-scope="ctx">
  <uiv-popover placement="left"
               title="Testing">
    <button type="button"
            data-role="trigger" 
            class="btn btn-xs btn-flat btn-info">Test</button>
    <template slot="popover">
      <p>When you can see this, it works. :)</p>
    </template>
  </uiv-popover>
</template>

When using a different configuration of the component, it works, but only on the first page of the table. Switching pages will break it, although switching back to the first page brings it back to life.

<template slot="somecolumn" slot-scope="ctx">
  <button type="button"
          :id="'test'+ctx.row.id"
          class="btn btn-xs btn-flat btn-info">Test</button>
  <uiv-popover placement="left"
               title="Testing"
               :target="'#test'+ctx.row.id">
    <template slot="popover">
        <p>When you can see this, it works. :)</p>
    </template>
  </uiv-popover>
</template>

With this working template, there is another issue though. When clicking the button, the popover appears twice (recognizable from the darker shadow and because they can be removed individually by clicking). I'm using the same component in other places of my application without any issues. So I guess there is something up with the table which doesn't work out as expected.

I'm open for any hints and suggestions what to try differently.

---

As a side note: there also seems to be an issue with the FixedColumns plugin. Due to the <thead> introduced for the HEAD_<column> templates, the plugin has troubles finding cells to copy (which is how the plugin works). The only workaround for this seems to remove the <thead> from the component template (I did so in a local fork).

Similarly, in order to be able to render a table footer (e.g. for column search inputs), it is necessary to provide a <tfoot> in the template with a matching amount of <td> tags compared to the amount of configured columns. No idea why, but the browser is not happy otherwise. Maybe it has to do with the initialization sequence? I add the search inputs in the initComplete callback (which worker like a charme in a vanilla DataTable).

[noogen]

There are a couple of issues here. Let me try to answer each one:

1. Unfortunately, templating wise, as jQuery datatables.net is not native Vue, you've reached the limit of this component per my note in the native templating section here https://github.com/niiknow/vue-datatables-net#native-templating-sort-of-explained I still have not figured out the best way to handle native/inner component events. This mean that events and native component, that has event, will not work.

2. FixedColumns plugin is complex even when use with raw jQuery datatables.net - see warning on this page - https://datatables.net/extensions/fixedcolumns/ It's good that you are able to get it to work. Not sure what I can do here but to provide way to hide/override entire thead.

3. Similar to Add name #2 above, provide way to template/add dummy tfoot.

To summarize, I'm not sure what I can do here for these issues. Even if I can provide some kind of a workaround, I'm not sure how to make sure that it work. It also seem like you've resolved some of the issues so I'll leave it up to you/the community to provide pull request/solution.

P.S. As we internally use Bootstrap4, we've since moved on to using native b-table of bootstrap-vue and have written plugin to support connecting with datatables.net backend API - https://github.com/niiknow/bvtnet-items-provider - Of course, this repository is still open for anyone using other CSS Frameworks and would like to provide pull requests for enhancements.

[Namoshek]

Thank you for having a look at it. I understand these issues are out of your control and maybe even impossible to solve due to the nature of Vue. Unfortunately, for me the only reason to switch from native DataTables to this Vue wrapper would've been that I could use reactive components to render columns (it's just nicer to work with than using vanilla JS). Using data-action doesn't work for me because I'm basically rendering the table from Laravel on the server side and I don't think rendering whole components with JavaScript is the way to go or fits with my current approach.

It's unfortunate, but I hope this ticket with my examples and your answer helps others to realize this limitation earlier than I did. Even though I did read your note in the docs, I didn't give up because event handling of one of the templates worked (as written above). Anyway, thanks again. Probably it's time to look around for a native data table and write my own server-side handler. Wouldn't be the first time for me. 😉

[noogen]

There's a possibility that this issue can be partially resolved with the merge of this datatables.net pull request: DataTables/DataTablesSrc#198