What’s the best method to group/ungroup rows in a data table?

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

Tags: