States and behaviour for progress bars embedded in tables

by Michael Lai   Last Updated July 10, 2019 07:16 AM - source

These days it is not uncommon for data tables to contain more complex UI elements (i.e. not just data), with things like pills (or tags), call-to-action buttons, icons, and even graphs & charts (e.g. sparklines) to be embedded.

However, I haven't actually seen the specific behaviour for these embedded UI elements specified in the context of an child element in a table cell.

So the question is, what happens to a progress bar (and other UI elements) when the table row cycles through different states (e.g. hover-over, active, selected, etc.) and how does the styling and behaviour change compared to when they are outside of a table?

enter image description here

A specific example of this is to consider what happens to a table cell containing a progress bar (which is actually not an uncommon thing to see) if it is selected. Should it be:

  1. Unchanged (even though there might be some contrast issues with the table cell's selected state).
  2. Modified by making changes to the colour or styling
  3. A custom rule to the behaviour of the table to accommodate the interaction

If you can include any screenshots of actual examples of applications (rather than CodePen or design concepts) that would be very useful for illustrating the answer.



Related Questions






Expand truncated table cell content on hover

Updated November 05, 2016 09:06 AM