Conditional formatting based on cell value
Last updated
Last updated
© 2024 UI Bakery
In many cases, you might want to highlight certain Table values based on a specific condition. In these situations, the ability to reference self {{value}}
comes in handy. Let's check a couple of examples.
Imagine you have a list of Customers, and you would like to monitor their state depending on their credit limit amount. All customers with a credit limit less than 90k are at risk, so these ones should be highlighted in red.
To highlight the cells based on the condition, follow these steps:
open Column's settings - View settings
In the Color field, specify the condition: {{ value >= 90000 ? 'success' : 'danger' }}
You will notice how the values greater than 90k are highlighted in green, while the rest is highlighted in red.
Let's say you need to process the result of the employee satisfaction survey, but instead of the plain satisfaction rate have emojis in the Table: 😔 for the responses with less than 20 points, 🙂 for neutral responses with 20 to 70 points and 😍 for responses with more than 70 points.
To map numerical values to the corresponding emojis, follow these steps:
change the Type of the field from Number to String
open View Settings - Mapper
specify the code: {{ value < 20 ? '😔' : value >= 20 && value < 70 ? '🙂' : value >= 70 ? '😍' : '' }}