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.

  • 1
    Will the subtypes have the same columns (attributes) of the original types? Including sub-sub-types? – Heitor Feb 9 '15 at 11:16
  • Yes, how many levels? If just two (type and sub-type), trivial to indent sub-types. If many levels, maybe a tree view would be appropriate (you can still have columns for common fields, if you put "tree" in first column. Or, you can have master-detail view, with tree on left and details on right, like Outlook, Explorer, etc. – Steve Jones Mar 11 '15 at 10:53

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:

enter image description here

| improve this answer | |

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.