Design/Ideas needed for better utilization of space

Question

There is one grid-view in our web application. But as you can see, group and category are eating up the space. Is there any better ideas for such layouts? Even if there is total change in the layout, that will be fine. I tried to search for better alternatives but I couldn't find.

Answer 1

I think you should also try a card layout. For example:

This layout provides multiple benefits:

• Aids quick scanning
  • Cards are easier to scan compared to tables.
• Easily adapt to small screens
  • Cards will work better on mobile/smaller devices in this case compared to tables, as they can be organized to scroll in a single column.
• Edit/delete buttons are positioned close to the items they modify
  • In the original version, you'd notice that the edit/trash icons are a bit ambiguous. It is not clear what the icons will edit or remove. In general, actions/buttons should be close to the things they act on.
• Removes Icon cluster
  • You don't have to show the icons in multiple rows. Using cards, icons can be shown (or emphasized) on hover and directly where they are needed.

Answer 2

You may try a tree hierachy style organization. Something like this :

^{download bmml source – Wireframes created with Balsamiq Mockups}