cell hover event not getting triggered
Column def:
columnHelper.accessor((row) => row, {
id: "email",
cell: (row) => {
const member = row.row.original as User;
return (
<div className="flex flex-col tooltip" data-tip={member.email}>
<span className="">{member.fullName}</span>
<span className="truncate md:w-[150px] max-md:w-full text-[#777777] text-sm font-normal">
{member.email}
</span>
</div>
);
},
header: "",
}),
Table body:
<tbody className="flex flex-col gap-2">
{tableInstance.getRowModel().rows.map((rowEl) => {
return (
<tr
key={rowEl.id}
className="flex flex-col md:justify-between users-table-row border border-black rounded-md shadow-md bg-white">
{rowEl.getVisibleCells().map((cellEl, index) => {
return (
<td
key={cellEl.id}
className={p-4 flex flex-row items-center font-bold ${
index === rowEl.getVisibleCells().length - 1 || index === 1
? "justify-center"
: "justify-between"
}}>
{flexRender(cellEl.column.columnDef.cell, cellEl.getContext())}
</td>
);
})}
</tr>
);
})}
</tbody>
When I hover over this cell I don't see the hover event getting triggered.
I have to click on the cell in order for the hover event to get triggered.0 Replies