Problem
It is currently not possible to adjust the display depending on the current value (simple/in-app).
Desire
You would like to be able to adjust the background color, font color, weight, style or frame depending on the column value.
Realization
There is a new option for "Column configurations" for tables and grids: "Column customizations". This option can be used to make UI settings for a selected column: A new option is "CSS classes". This can be used to set both static and dynamic CSS classes for content.
A dynamic CSS class can be used to configure a function for a column that determines a CSS class based on the cell value. The actual display can then be defined via an add-on to the theme. There are predefined classes from the core theme that can be used to create different color markups:
- tl-info
- tl-success
- tl-warning
- tl-danger
- tl-debug,
- tl-accent-1
- tl-accent-2
- tl-accent-3
All these classes can be combined with the tl-lighter class to set a lighter color accent.
The accent classes can now also be used in font icons to color the icon accordingly.
Test
Dynamic formatting is built into tl-demo in the views "Technical demo > Components > Tables and trees > Table" and "Technical demo > Components > Tables and trees > Grid".