@omrid01/node-red-dashboard-2-table-tabulator - setting colors

I have been playing around with the @omrid01/node-red-dashboard-2-table-tabulator node to familiarize my self with it. I have used the examples which comes withe the node.

Everything seem to work fine except setting/changing colors. If I use the color injection examples under the grouping "Table Appearance" (ref pic) nothing happens to the table if viewed in Firefox but they work fine when viewed the in Edge.


(The hide and show column do work in both browsers)

Also I was wondering whether (and how) colors can be set directly in the "Initial Table Configuration" definition? Say I want one column header to have different (background)color from the general color scheme.

Actually, I did not test the node on Firefox, only on Edge & Chrome :woozy_face:. I will check this. In the meantime, can you open a console log in Firefox and see if setting a color throws any errors or exceptions?

Initial colors can be set via CSS. You can add a CSS-type template node such as:

But this applies to the whole table. I am adding support for function-based custom formatters/mutators in the upcoming 0.6.0 release (in a few days). This will allow you to set custom colors per column.

Thank you for your reply.

There does not appear any messages in the console when I use any one of the three "color change" inject nodes in the section "Table Appearance" (ref pic in my initial post).
I have verified in parallel with Edge that the colors do indeed change here

Injecting "Clear styles" however makes the page flicker in Firefox an results in:

11:39:10.826 ebf128a3b696ce43: Table destroyed ui-tabulator.umd.js:25:15627
11:39:10.846 ebf128a3b696ce43: Table built and ready ui-tabulator.umd.js:25:14687

I have attached a logfile containing the messages from when the dashboard page is loaded:
console-export-2024-11-10_11-2-41_NEW_TAB_LOADED.txt (753 Bytes)

Thanks for checking this. 'Clear styles' will cause a flicker in all browsers, as I'm just recreating the table without the styles (would be very complex to save and restore all the individual original styles, I'll try to think of something in a future version).

Hello,
I work also with @omrid01/node-red-dashboard-2-table-tabulator.
My questions also concern color settings in a table.
1- I am trying to apply this filter with your new node version in dashboard-2:
rowFormatter:function(row){
if(row.getData().Situation == "Déclassé"){
row.getElement().style.backgroundColor = "#8e9191";
}
Can you tell me how to implement this in your current version?

2- When this filter is applied the line selection with the blue colour doesn't work anymore.
Could you tell me if these two "styles" for lines are compatible ? And how to manage them to make it work?

Regards
Jean-Rem

The dashboard-2 framework does not allow sending properties of type 'function' to dashboard client widgets and strips them off the messages.
I have found a solution for this, which will be available in release 0.6.0, due within the coming week.

1 Like

Hello,

Thanks for your quick reply.
Good news that you have found a solution that will be available in the next version. :+1:
But first of all, thanks for the node you have already developed, great job.

Regards
Jean-Rem

1 Like

Hello,

I try to use the new " Custom Functions" you just implemeted in your 0.6.0 release.
For the example you just provide with your node, I try the code below... but didn't work.
Could you help me ?

Regards J-R

function rowFormatter(row) {
    var data = row.getData();
    if (data.id = '1')
        row.getElement().style.backgroundColor = "#8e9191";
    return row.getData(); 
}

Try this:

function rowFormatter(row) {
var data = row.getData();
if (data.id == 1) // you need a == here and maybe 1 instead of '1'
row.getElement().style.backgroundColor = "#8e9191";
return row.getData();
}

Hello

Thanks for the idea but it doesn't work
I have also removed the Theme File: @CSS:tabulator_midnight.min.css
I let this field empty to be shure that there is no conflict with the background color I've selected.
But still the same, no rowFormatter result yet.

Regards
J-R

In addition to replacing '=' with '==', did you prefix the function name with @F: in your configuration?
Here is how it should look like:

In the table configuration:

...
   "rowFormatter":"@F:myRowFormatter",
...

In the Custom Functions property:

function myRowFormatter (row)
{
    var data = row.getData();
    if (data.id == 1) {  // assuming you have such a row
      row.getElement().style.backgroundColor = "#8e9191";
    }
}

Can you send us your table configuration & custom functions objects

By the way Omri,
have you had time to look at why Firefox doesn't react on tbSetStyle commands?
I have tried a bit my self but so far without any luck..

Hello,

Thanks for your remark for the prefix :wink:
Here is the code I use from your original example.

{
	"height": 200,
	"selectableRows": true,
    "layout":"fitColumns",
	"rowFormatter": "@F:myRowFormatter",
	"data": [
		{
			"id": 1,
			"fname": "John",
			"lname": "Smith",
			"age": 25,
			"gender": "Male ",
			"clr": 3,
			"notes": "A jolly good fellow"
		},
		{
			"id": 2,
			"fname": "Jack",
			"lname": "Brown",
			"gender": "Male ",
			"age": 9,
			"clr": 4,
			"notes": "Just a little boy"
		},
		{
			"id": 3,
			"fname": "Jill",
			"lname": "Baker",
			"gender": "Female",
			"age": 21,
			"clr": 5,
			"notes": "She's the best"
		}
	],
	"columns": [
        {"formatter":"rowSelection","titleFormatter":"rowSelection","width": 40,"hozAlign":"center","headerSort":false},
		{
			"title": "Id",
			"field": "id",
			"width": 50,
			"headerSortTristate":true,
			"hozAlign": "center"
		},
		{
			"title": "First Name",
			"field": "fname",
			"width": 120,
			"headerSortTristate":true,
			"hozAlign": "left",
			"headerFilter": "input",
			"headerFilterPlaceholder": "Filter..."
		},
		{
			"title": "Last Name",
			"field": "lname",
			"width": 120,
			"headerSortTristate":true,
			"hozAlign": "left",
			"headerFilter": "input",
			"headerFilterPlaceholder": "Filter..."
		},
		{
			"title": "Gender",
			"field": "gender",
			"width": 100,
			"headerSortTristate":true,
			"hozAlign": "center",
			"editor": "list",
			"editorParams": {
				"values": {
					"Male ": "Male ",
					"Female": "Female",
					"Unknown": "Unknown"
				}
			},
			"headerFilter": true,
			"headerFilterPlaceholder": "Select...",
			"headerFilterParams": {
				"values": {
					"Male ": "Male ",
					"Female": "Female",
					"Unknown": "Unknown",
					"": ""
				}
			}

		},
		{
			"title": "Age",
			"field": "age",
			"headerSortTristate": true,
			"hozAlign": "center",
			"formatter": "@F:ageColor",
			"formatterParams": {
				"minAge": 18
			}
		},
		{
			"field": "clr",
			"width": 20,
			"headerSortTristate":true,
			"hozAlign": "center",
			"formatter": "traffic",
			"formatterParams": {
				"min": 0,
				"max": 6,
				"color": [
					"",
					"gray",
					"orange",
					"blue",
					"green",
					"red",
					"cyan"
				]
			}
		},
		{
			"title": "Notes (Editable)",
			"field": "notes",
			"headerSortTristate":true,
			"hozAlign": "left",
			"editor": "input"
		}
	]
}

Custom Functions:

// Conditional formatter
//function ageColor(cell, params) {
//    if (cell.getValue() < params.minAge)
//        cell.getElement().style.color = 'orange';
//    return cell.getValue();
//}
function ageColor(cell) {
    if (cell.getValue() > 20)
        cell.getElement().style.color = 'orange';
    return cell.getValue();
}
function myRowFormatter(row) {
    var data = row.getData();
    if (data.id == 1) {
        row.getElement().style.backgroundColor = "red";
    }  
}

Here is the result I expected:
Uploading: image.png…

Here is the result I expected:

I am afraid I did not have the time to look into it yet. Can you open an issue on the node's GitHub, so we don't forget this

So we're all good now? :slightly_smiling_face:

Note, that it's preferable not to leave the keyword function in the commented-out section, as I use it for parsing the code sheet. If you want to keep the old code commented-out for reference, change the word 'function' to 'f-unction' or something similar.

Done: see this.