States and behaviour for progress bars embedded in tables

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

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


Updated January 28, 2019 15:16 PM

Updated July 04, 2017 11:16 AM

Updated July 14, 2017 18:16 PM

Updated February 07, 2019 19:16 PM

Updated November 05, 2016 09:06 AM