How to display an "Action item" cell when hovering over a grid row?

I’d like to display an icon with three dots in it when a user hovers over a row, indicating that action items are avaiable. Once the user clicks on the icon / cell, a context menu with action items for that row would be displayed. When a user picks the action item from the context menu, an event would be fired with the row data / details. On hovering away, the icon must disappear. Are the any examples or ideas how to accomplish this? TIA

I’m not aware of any examples of this, but the following approach should work:

  1. Use a single-item MenuBar for the icon/button, placed in its own component-column

  2. Apply a bit of css that controls its visibility, e.g.
    visibility: var(--menu-visibility, hidden);

  3. Toggle the visibility on when the row is hovered:

  --menu-visibility: visible;
}```

@useful-whale Thank you for the tip, this is pretty nifty.

will this not create any perfomance issue due to adding this as component ? Also converting this one to Lit wihen there are multiple items in the menu also makes it further complex

I’d suggest use some buttong ( making them as Lit is easy ) and then follow the visible/hidden approach as said above

That’s right. I’m curious, what are a lighter-weight options?

Well, first of all, the difference beween a Vaadin Button and a MenuBar is not that big in terms of weight/performance hit.

You could go with a Button and a ContextMenu opened from that button, but the position of the menu won’t line up as nicely, and it will only be very very marginally more lightweight.

The most lightweight option would be to just render an icon and opening a Grid-ContextMenu (https://vaadin.com/docs/latest/components/grid#context-menu) on the column containing the icon. This is terrible in terms of keyboard and screen reader accessibility, however.

(not sure what you mean by “converting to Lit when there are multiple items in the menu”)

i meant, this one https://discord.com/channels/732335336448852018/1176552008849830009

I certainly don’t want terrible. Just to provide a bit more context, I’d like the. user to be able to delete, and move a row. This wont’b be happening too often, because it’s mostly CRU grid with some rare Ds, so it wouldn’t make a lot of sense to display these options on each row permanently, cluttering the UX. Thus, hover and three dots icon.

Then the MenuBar is by far the easiest option, and I would go with that unless it affects the Grid’s performance too much (which it shouldn’t – I’ve used that approach many times myself)

a LitRenderer is certainly always more lightweight than a ComponentRenderer, but it would be quite tricky to make that approach accessible.

something like this ```private MenuBar createProductMenuBar(ProductEntity entity) {
MenuBar menuBar = new MenuBar();
menuBar.addThemeVariants(MenuBarVariant.LUMO_TERTIARY);
menuBar.addItem(“Edit”, e → updateProduct(entity))
.addComponentAsFirst(VaadinIcon.EDIT.create());

    menuBar.addItem("Delete", e -> deleteProduct(entity))
            .addComponentAsFirst(UIUtils.createTrashIcon());

    return menuBar;
}```

?

image.png

yup

@useful-whale thank you. BTW, I really enjoyed your recent talk on how to theme and style Vaadin apps .

@nice-camel thanks for the code example.

Glad to hear it!

@nice-camel How do you display that component with three dots? Just a button?