I would like to display a menu button (ellipses) in the table’s main column on mouse-over, this will list several high level row/data operations (delete, duplicate, move, flag, details, etc) that we have in our app. These are things that could maybe go in a context-menu, but we want to display the menu button on rollover to improve discoverability.
How should I go about doing this? I couldn’t find an existing example that was close to what I want.
What I have so far is to use a custom renderer and append a <button> element to the td, and add listeners to the td for mouseover and mouseout:
export const projectNameRenderer = (instance, td, row, col, prop, value, cellProperties) => {
Handsontable.renderers.TextRenderer(instance, td, row, col, prop, value, cellProperties);
const button = document.createElement("button");
button.textContent = "...";
button.className = styles.moreButton;
button.addEventListener("click", e => {
console.log("clicked", e);
// Need to show a context menu here...
});
td.appendChild(button);
td.addEventListener("mouseover", e => button.classList.add(styles.visible));
td.addEventListener("mouseout", e => button.classList.remove(styles.visible));
return td;
};
But how do I display the context-menu when clicked? And is this approach going to result in any memory leaks?
