While Redash doesn’t naturally support conditional formatting, this can be bypassed with some html tags.
WHEN cat.color IN ('short_hair',
AND cat_count > 1000 THEN '<div class="bg-success p-10 text-center">' || count(cat) || '</div>'
OR cat_count > 200 THEN '<div class="bg-warning p-10 text-center">' || count(cat) || '</div>'
ELSE '<div class="bg-danger p-10 text-center">' || count(cat) || '</div>'
END AS cat_count
In this example we cover different formatting types you can apply in a div:
- Colors - green (
bg-success), yellow (
bg-warning) and red (
bg-danger). You can also use
bg-info for blue but who wants blue in their tables?
- Padding - we used
p-10 to pad the text just a little bit.
- Text alignment - we aligned our cat counts to the center (
text-center), by default tables are aligned to the left.
Other styling formats you can use:
- Font Size (font-size) - can be pixels (10px, 20px, 34px and so on), relative (50%, 150%…), textual (large, medium, xx-small…) or HTML tags for headings (h1, h2…).
<h1> and Displays (class = display1) - h1-h6 are heading sizes when h1 is the largest, display is a class you can combine with a heading to get a more stylized look.
- Font type (font-family) - change the font, not all fonts are supported in each browser so it’s tricky.
- Misc- mark (mark), underline (u) , bold (strong), italic (em)
You’re welcome to try other Bootstrap CSS tricks and share with us.