Nowadays, it is not uncommon for data tables to contain more complex user interface elements (not just data), with items such as pills (or tags), call-to-call buttons action, icons and even graphics to be integrated.
However, I have not yet seen the specific behavior of these embedded UI elements specified in the context of a child element in a table cell.
So the question is what happens to a progress bar (and other elements of the UI) when the row of the table passes from different states (hover, active, selected, etc.) and how the Does style and behavior change compared to outside a table?
A specific example is to consider what happens in a table cell containing a progress bar (which is actually not unusual to see) if it is selected. Should it be:
- Unchanged (even though there may be contrast problems with the selected state of the table cell).
- Changed by changing the color or style
- A custom rule to the behavior of the table to support the interaction
If you can include screenshots of real-world application examples (rather than CodePen or design concepts), this would be very useful to illustrate the answer.