Vue component with Flowbite

csyu

Description of problem:
I have created a datatable with a custom "action" column. In that manual "action" slot, I create a button that when clicked, shows a div. This is my DataTable code:

<DataTable ref="table" :columns="columns" :data="data" :options="options"  class="display">
  <template #action="props">
      <button id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" type="button">Click me</button>
       <div id="dropdownDots" class="z-10 hidden bg-white">Works</div>
</template>
</DataTable>

When I click on the rendered button, nothing happens.

To make sure that the "click me" button works without the DataTable, I moved the code (button and div) outside of the DataTable declaration. When I click the "click me" button, the div shows.... so I know the functionality works outside the Datatable.

Any thoughts on how I can carry this functionality to the cell of the Datatable?

Thanks.

Note: the "Click Me" button is rendered using Flowbite (https://flowbite.com/docs/components/buttons/)

allan

Can you create a minimal test case on StackBltiz or similar so I can take a look into it please?

Allan