I've been struggling with a good solution to group/ungroup rows in a data table. We've initially implemented drag-n-drop but that was a nightmare to implement due to 3rd-party library restrictions, & a nightmare to use for end users.

I've come up with a different method that's hopefully more straightforward to use, but I'm still not 100% happy with it. Check out the demo below and let me know how I could improve it.

Some items on my list:

  • Make it more obvious what clicking on the checkbox will do. Maybe an edit mode or a tooltip?
  • Somehow streamline the ways the "Group Items" buttons are displayed.

One other idea is to mimic how one would group/ungroup elements with a combination of Shift+Select elements > Right Click > Group/Ungroup and keyboard commands. However, with this being a browser app that'd also support touch-devices AND is geared toward an older demographic, I'm not sure if that's a good idea.

YOUTUBE DEMO: Grouping & Ungrouping Rows in Data Table Demo


OPINION: If grouping elements is a common action for your user I do not see a problem with your implementation in the demo.

Would the people using this app be considered "power users" would they already be familiar with these actions required? A helpful question to ask yourself is; Would the user require training to know how to complete this grouping task?

What other actions might be assumed by selecting a checkbox? Could it be the case that the user will want to check all the list items and delete them?

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.