How to add row functionality in DataTable components in Vue.js?

Aremju

I have this template that looks similar like this:

<template>
<DataTable :data="formattedData" class="cell-border compact hover order-column row-border stripe">
<thead>
<tr>
<th id="..." class="lato-black" data-testid="nameHeader">Name</th>
<th id="..." class="lato-black" data-testid="creationDateHeader">
Creation date
</th>
<th id="..." style="width: 5px; text-align: right;"></th>
</tr>
</thead>

<template #column-0="props">
  <div :data-testid="`definitionName-${props.cellData.id}`" class="d-flex justify-content-start">
    {{ props.cellData.title }}
  </div>
</template>
<template #column-1="props">
  <div :data-testid="`creationDate-${props.cellData.id}`" class="d-flex justify-content-start">
    {{ formatDateString(props.cellData.creationDate) }}
  </div>
</template>
<template #column-2="props">
  <div class="d-flex justify-content-end">
    <div>
      <font-awesome-icon :icon="['far', 'pen-to-square']" class="hover-pointer"
                         @click="navigate(props.cellData.anotherId, props.cellData.id)"/>
    </div>
    <div class="space-between-icons"/>
    <Component />
  </div>
</template>

</DataTable>
</template>

In the last Column, I have this font-awesome-icon as well as a "Component", and I want to only show this particular component when hovering over the specific row, and I have absolutely no idea how to accomplish that with
this particular setup I really need. Can someone help me with this issue?

allan

You'd need to use an event on the DataTable that would then show / hide the element:

table.on('tr', 'mouseenter', function () {
  let iconWrapper = this.querySelector('div.icon'); // note - add this class to the container div

  iconWrapper.style.display = 'block';
});

Add a similar event listener for mouseleave. And also set the CSS for div.icon (or whatever class name you choose - probably something more specific would be better) to hide it by default.

Allan