1

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? I believe that this can be problematic due to the fact that progress bars require a contrast in the colours used to express the completed and incomplete sections, which is exacerbated by the fact that many tables also implement zebra striping and mouse interaction behaviours (e.g. hover-over).

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.

Improve this question
2
  • 1
    Is there any chance you could upload a higher resolution image? t's very small.
    – DarrylGodden
    Jul 10, 2019 at 8:45
  • @DarrylGodden the image is there just to give you an idea of what progress bars embedded in data tables look like, but it isn't required for you to come up with an answer as I am only asking for actual examples (whereas this is a CodePen concept).
    – Michael Lai ♦
    Jul 10, 2019 at 23:30

1 Answer 1

Reset to default
2

Google analytics has embedded bar charts (not progress bars), which you can right click on to explore further.

In the Analysis (Beta) views, you'll see embedded data graphics:

enter image description here

And here it is in action, when you hover and select:

enter image description here

Improve this answer
3
  • +1 Okay, so in their implementation the cell is highlighted by creating a border around the cell. It is rather unusual that they allow the columns to overlap (as seen in the first two columns) when the values don't fit properly due to the extreme range of values.
    – Michael Lai ♦
    Jul 10, 2019 at 23:28
  • I think they're not overlapping: i think the fact that there's no border, makes it look like 1 property. That's how I read it.
    – Mike M
    Jul 10, 2019 at 23:36
  • You are right, the visual cue is processed in my head much more than the logical layout of the table :p
    – Michael Lai ♦
    Jul 11, 2019 at 3:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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