Options column in collection list table - replace 3-dot hover

[ericp]

I’m trying to use two buttons in the last column of a collection list table (edit & delete) instead of the OOB 3-dot hover list. The issue I have is when I have the line (row) setting to go to another page on-click, this is what occurs when clicking on the buttons in the last column instead of the workflow setup for each button. Somehow when using the OOB setup, when you click on the 3-dots to show the hover list of options, the on-click behavior is ignored. What setting is controlling this?

For context, the reason for the buttons, is that my app is primarily mobile-first and click/hover actions aren’t the greatest UX for my use-case.

[Joyce]

Oh! Interesting use case.

The 3-dots that come with the default table element are inside a hover dropdown element. You could remove them and add 2 buttons instead:

Just tried it and it does work.

[ericp]

Thanks Joyce. I had originally tried just placing the buttons in the Flexbox and deleted the Hover dropdown element. Placing the buttons in the Trigger element like you showed works as intended.

Appreciate the quick response!