Progress bar colors in new table

💬 Feature Requests
3

Hey folks!

Thanks for posting a reply here @vinnie, and props for tackling this with an HTML component. Just want to highlight some built-in Retool features that might help, though they aren't perfect:

I'll go ahead and file a request with the team to add more support for progress bar colors, in the meantime it looks as though you can classify each bar using the "Positive trend" and "Negative trend" thresholds:

From there, you target them with some custom CSS to have them be the colors you want. This gives you three categories:

  1. Below "Negative trend" threshold (CSS classes: ._cgnLr._9iakn)
  2. Between "Negative trend" and "Positive trend" thresholds (CSS class: ._cgnLr)
  3. Above "Positive trend" threshold (CSS classes: ._cgnLr._GuKyN)

This can be a bit counterintuitive since you need to have the negative trend threshold be strictly less than the positive trend threshold in order to get three distinct cases, and that might not make sense with your use case. But with some brain-bending you can hopefully get something like what you're looking for:

For the standalone progress bar component, it's possible to define the fill color with a ternary that checks the value of the component, e.g. something like {{self.value < 70 ? theme.success : self.value < 90 ? theme.warning : theme.danger}}:

1 Like