Description
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).