Displaying hierarchical data in table

Question

I have a table which contains some data. It's a list of 'types' where users can view 'types', add 'types', edit 'types' and delete 'types'. These 'types' may also have 'subtypes' that also need to have the same actions performed on them.

I'm trying to come up with appropriate ways to display these subtypes and the required functionality within the table. So far the best solution I have come up with is something like this: http://datatables.net/examples/api/row_details.html where there is a row that can be expanded to see more details, and in the expansion I would provide a button that users could use to add new subtypes.

Another solution that I have thought of is showing the subtypes in a modal, but that doesn't seem like a very clean solution.

Answer 1

Tables and visual noise

Based on the example you shared ( Employees/ Location/Salaries) I would say you should move away from the table format which are quite difficult to manipulate and add too much visual noise.

Luke Wroblewski wrote this interesting piece about reducing visual noise in tables:

The problem is that excessive visual noise and redundant content obscure the values themselves—arguably the most important elements within the table. It’s hard to concentrate on the values, because the background color and the thick borders continually compete for your attention. The varying thicknesses of the table and cell borders actually make them even more distracting. In other words, the table itself is talking louder than the data it’s trying to communicate.

Source: So the Necessary May Speak

---

Modular Approach

So, to come back to your issue, you can use a more modular approach whereby all types and subtypes are organised in hierarchical manner within a filterable sortable list of items.

To establish hierarchy and emphasise relative importance of types and subtypes you can play around with font size, icons and spacing and equip each item with the relevant primary and secondary calls to action as in the example below:

Answer 2

If you are trying to avoid using extra controls and/or have all the data always visible; you can use a fixed 'x' amount of left padding for a subtype.

Then, if you wanted to add another level of subtypes, you can use 2x left padding for that one and so on.