V-Slot Mode issue

[tpzar]

Dear @linmasahiro, in V-Slot Mode example, I noticed that the popup opens only if I click at the same height as the cell text, and it doesn't work if I click above or below the text. How can the code be modified so that the popup opens by clicking in any area of the cell, just like with the rowClicked function? Thank you

[linmasahiro]

Hi @tpzar Your means click the tag will be open popup, right? Here an example to implement it.

template:

<table-lite
  ...
  @is-finished="tableLoadingFinish"
>
    <template v-slot:name="data">
      <div :data-id="data.value.id" class="is-rows-el dialog-btn">
        {{ data.value.name }}
      </div>
    </template>
</table-lite>

setup:

const tableLoadingFinish = (elements) => {
  table.isLoading = false;
  Array.prototype.forEach.call(elements, function (element) {
    if (element.classList.contains("dialog-btn")) {
      element.closest(".vtl-tbody-td").addEventListener("click", function (event) {
        event.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases.
        alert(element.dataset.id + ' clicked!')
      });
    }
  });
};