Best way to show one-to-many relationship in a grid?

Question

This is probably the most common issue when it comes to grid/table design; How to display one-to-many relationship such not to repeat the item nested.

Please take a look at two solutions I came up with. I was wondering if there is a better alternative?

Answer 1

If you only have one column having multiple values (the Categories in the example), you could use a plain two-dimensional array - a feature table. You basically turn the relation as the other dimension, as sketched below.

However, this might not scale too well, if there are huge number of categories.

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

Answer 2

You can use tags to display relationship.

It is most compact and easiest way to display and edit data.

See http://ivaynberg.github.io/select2/

Answer 3

I think the categories can be grouped and assigned to different properties. For example, the property "number of legs" can be 2 or 4. This allows you to present the information this way:

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

There are several advantages:

• a fewer number of entries / columns
• items can be easily compared and grouped, e.g. you could allow the user to sort/group the rows by certain properties
• it is easier to verify if an item is completely specified, e.g. what is the subspecies an eagle belongs to?

You can use drop down boxes to edit the cell entries.