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

PeterH · 8 November 2024 11:31

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.

omrid · 10 November 2024 08:43

Actually, I did not test the node on Firefox, only on Edge & Chrome . 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.

PeterH · 10 November 2024 10:43

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)

omrid · 10 November 2024 22:40

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).

Jean-Rem · 12 November 2024 18:31

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

omrid · 12 November 2024 20:29

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.

Jean-Rem · 13 November 2024 15:30

Hello,

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

Regards
Jean-Rem

Jean-Rem · 27 November 2024 16:04

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(); 
}

PeterH · 27 November 2024 16:34

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();
}

Jean-Rem · 27 November 2024 17:15

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

omrid · 28 November 2024 09:28

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

PeterH · 28 November 2024 11:08

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..

Jean-Rem · 28 November 2024 19:27

Hello,

Thanks for your remark for the prefix
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…

Jean-Rem · 28 November 2024 19:33

Here is the result I expected:

omrid · 28 November 2024 22:12

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

omrid · 28 November 2024 22:22

So we're all good now?

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.

PeterH · 29 November 2024 10:33

Done: see this.

omrid · 4 December 2024 12:22

Just released a fix in v0.6.1

PeterH · 4 December 2024 14:09

Thank you!
briefly tested: seems to work.

hallpauli · 6 December 2024 22:30

I tried this example and the examples that came with the node, and it works great as long as the the table is configured in the node's "Initial Table Configuration". But it didn't seem to work when trying to configure the table dynamically, by sending this message to the node:

msg.tbCmd = "tbCreateTable";
msg.tbInitObj = { copy of the Initial Table Configuration in the example node }

Even if the node still contains predefined custom functions, they can't be referenced, it seems:

ui-tabulator.umd.js:25 Function not found
ui-tabulator.umd.js:25 Missing or Invalid user-defined functions
ui-tabulator.umd.js:8 Formatter Error - No such formatter found: @F:ageColor

Is there another way?

Topic		Replies	Views
New table node for Dashboard 2.0 Dashboard dashboard-2	22	485	17 July 2024
Ui-table supports ui_control Dashboard	85	23731	26 July 2021
How can I change ui-table's row of color? Dashboard	6	1180	7 August 2022
Node-ui-table: Inconsistent load behavior, leading to changing no. of columns on refresh General	27	607	27 November 2023
Examples for node-red-node-ui-table Dashboard	93	46992	17 July 2020

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

Related topics