Comparing ui_table tickCloss formatter to the tabulator examples, I noticed that the tickCross is the same color be it true/false or 1/0. Is there a way to color the tick or cross? For example, for tick use the default theme color, but if a cross, say red? I am already using a render function to …

[image] Nodi.Rubrum: Is there a way to color the tick or cross? I tweaked the ui_table example that uses a msg.ui_control configuration. When the formatter is tickCross you can use the tickElement and crossElement with added custom styling. In the tickElement, you can see that i used the c…

Ah... tickElement... that makes more sense than the foreground color of the cell! I will give this a shot, thanks! And, this is done per column as well? Is there a way to apply these formatter parameters across all columns that are set to tickCross formatter?

Ok,, got the tick/cross element icon assignment working, and static color of course. Now for the bonus question? Can you sneak in a colorization that is more dynamic? Say I assigned a message part to a color... msg.iconcolor='blue'; But slipping this message part into the JSON formatted text, d…

[image] Nodi.Rubrum: Can you sneak in a colorization that is more dynamic? sure .. just switch in the Change node (the one that creates the ui_control msg) instead of using { } JSON to use an Expression and then you can use jsonata with something like "tickElement":"<i class='fa fa-check' s…

Yeah, as I have been changing and testing things, the complexity of trying to setup common formatter parameters for a few columns (in my use case) is not worth the complexity that would result.

So expression variant accepts the variable references... but JSON is executed, or parsed rather just as HTML. I take it, it is the expression type that invokes the evaluation before the final HTML is rendered. I say this to remind me of this fact, and that anyone reading this will gain potential i…

One more question... A bit of curve... colorize plain text? Since there does not seem to be an explicit 'element' the following did not work.... "textElement":" " Odd, Google tabulator references and did not seem to find a straight forward example of just colorizing plain text.

[image] Nodi.Rubrum: colorize plain text if its a style that you need to apply for all rows .. you can use "rowFormatter": "function(row){ row.getElement().style.color = 'green'; }", "tabulator": { ... "rowFormatter": "function(row){row.getElement().style.color = 'green'; //…

I just realized I asked the question wrong, this specific case is per cell, based on the value of the cell. I just realized as I was changing the code, that the entire row changed or the entire column changed. I think this the direction I am going to need to follow... {title:"Name", field:"name",…

@UnborN , yup... the trick is that I already have a row formatter that turns the entire row red, if an error resulted, so now I need to customize that formatter function to on error turn the row red, if not error then given the specific cell value, colorize it accordingly.

Node-RED

Node-RED Forum

Using ui_table 'tickCross' colorization?

General

UnborN 18 July 2022 20:34 12

There is a post on the Forum about changing the cell text (or background) color based on its value

Topic		Replies	Views
The colorization of ui_table is kicking me in the head! General	20	3744	15 September 2020
Ui-table in conjunction with ui-table handler General	10	2747	21 March 2022
UI table row color Dashboard	18	262	27 August 2025
Set background color of row ui table for different data Dashboard	10	1442	13 November 2022
UI Table Adjustments Dashboard	15	3641	21 January 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Using ui_table 'tickCross' colorization?

Related topics