Grouping multiple table actions using <Menu />.

[andioneto]

Hello team 👋
I would love some ideas and guidance about whether or not we should group slightly unrelated actions into one <Menu />.
Please refer to this CodeSandbox where you will find more context and details about my implementation.

Menu view with disabled options:

Menu with with all options enabled:

Thank you in advance 👍

[corinne-nagel]

Hey @andipants12 , thanks for sharing! I mocked up something that I think could simplify this menu structuring. I'm not sure if you have any constraints around naming/grouping/layering the menus, but have you thought about grouping the actions with group labels like so:

It could also be more user-friendly to pull the actions into buttons so that the user can see directly what checking the checkbox impacts. Might be a bit frustrating to select the checkbox and not know what you're impacting within the actions menu.

Let me know your thoughts!

[andioneto]

@corinne-nagel Thank you! I should have clarified, the current action flow is as follows:

1. customer needs to check checkboxes next to number instance
2. customer can select all, more than one, or one
3. Then the customer can perform actions on those checkboxes related to SIP/number configuration (these are the bulk actions)
4. The bulk actions are only: "enable," "disable," and "remove"

So are you saying that we should render action buttons next to the number to perform these actions on a single number more quickly, and have an option to "bulk" select, which will render checkboxes?
Also, do you think the grouped actions should just be split into two menus? That's how I have it currently implemented on my local branch... Just not sure how to compose the table actions + filters with two menus. Is that an antipattern to have two menus on a page?

[andioneto]

I just created this fork that shows the rest of the table a little more clearly (not real data or headers, just to give presentational view of what the table looks like currently) https://9qrw0.csb.app/

[SiTaggart]

Hi @andipants12, I think what you have in the second sandbox is somewhat going in the right direction.

Generally speaking I would keep all bulk actions that can be applied to a table in a single menu. It's fairly common to have bulk actions based on selection be presented in the filters for that table/list.

If you have sets of actions that might do specific types of actions on a single data list, it would be beneficial to clearly group those similar actions inside the menu. I like Corinnes guidance on using menu groups the best, as the group label can be used to help make the distinction between action types more clear.

I would just make it very clear that they are actions you can perform on selected items in the table.

[serifluous]

Here's a bulk actions table composition that you can use for more inspiration: https://share.goabstract.com/99e0ba8e-d723-447d-861e-902f60a412e7?collectionLayerId=877a19b4-fadb-43e0-ab96-e6d678456288&mode=design I like that this design separates the searching/filtering form fields from the bulk actions pretty clearly.

[andioneto]

Awesome, thank for sharing! My teammate Sivapriya shared this with me yesterday. We are working iteratively with our BU designers to come up with consistent usage in our VNV owned pages. Will take this back to them and plan the next changes. 💯