Representing relationships/hierarchy within an otherwise flat table view

Question

I have a standard table view which is used in a number of places in an online cloud portal. It's used to list servers, products, firewalls and more.

As I begin to build views for the firewall listing specifically, I've realised there's a slight difference in relationships here. With firewalls in particular, I need to be able to not only list them but also indicate that certain pairs in the list are linked. Specifically, I need to be able to represent a Master/Slave relationship.

I have re-ordered the list so that these pairs always appear next to each other and have also included a text column which says Master/Slave. But I can't seem to find a good way to represent these relationships more clearly without breaking the portal's UX consistency and doing something crazy like indenting certain rows.

Answer 1

I had two ideas while reading your problem.

First was showing a hierachy by using a tree view

Second, a chain icon to show linking of elements (relationship)

Answer 2

My colleague had a similar case recently. We decided to show the parents in the table with the expandable children lists.

Here're two types of showing this expand/collapse view: +/- and down/up pointing chevron

Answer 3

Your last example seems to be more common and used with hierarchical grids, as also shown on the Shield UI examples.