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

**URL:** <https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [8 November 2024 11:31 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989 "2024-11-08T11:31:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [8 November 2024 11:31 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/1 "2024-11-08T11:31:45Z")

</div>

I have been playing around with the [@omrid01/node-red-dashboard-2-table-tabulator](https://flows.nodered.org/node/@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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a1b2f9c982d9203a560a5084bd74fb384489660.png)  
(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.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [10 November 2024 08:43 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/2 "2024-11-10T08:43:20Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/05a7b8f0b17aad0cca657e18250b5843f3a5aa11.png)

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.

---

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [10 November 2024 10:43 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/3 "2024-11-10T10:43:08Z")

</div>

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](https://discourse.nodered.org/uploads/short-url/LamBbH0qiODXxAdsyo506AtVaO.txt) (753 Bytes)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [10 November 2024 22:40 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/4 "2024-11-10T22:40:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jean-Rem](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-rem/32/84461_2.png) [@Jean-Rem](https://discourse.nodered.org/u/Jean-Rem)\
**Post date:** [12 November 2024 18:31 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/5 "2024-11-12T18:31:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [12 November 2024 20:29 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/6 "2024-11-12T20:29:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jean-Rem](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-rem/32/84461_2.png) [@Jean-Rem](https://discourse.nodered.org/u/Jean-Rem)\
**Post date:** [13 November 2024 15:30 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/8 "2024-11-13T15:30:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jean-Rem](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-rem/32/84461_2.png) [@Jean-Rem](https://discourse.nodered.org/u/Jean-Rem)\
**Post date:** [27 November 2024 16:04 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/9 "2024-11-27T16:04:09Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [27 November 2024 16:34 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/10 "2024-11-27T16:34:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jean-Rem](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-rem/32/84461_2.png) [@Jean-Rem](https://discourse.nodered.org/u/Jean-Rem)\
**Post date:** [27 November 2024 17:15 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/11 "2024-11-27T17:15:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [28 November 2024 09:28 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/12 "2024-11-28T09:28:14Z")

</div>

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:

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

```

In the _ **Custom Functions** _ property:

```auto
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

---

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [28 November 2024 11:08 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/13 "2024-11-28T11:08:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jean-Rem](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-rem/32/84461_2.png) [@Jean-Rem](https://discourse.nodered.org/u/Jean-Rem)\
**Post date:** [28 November 2024 19:27 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/14 "2024-11-28T19:27:11Z")

</div>

Hello,

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

```auto
{
	"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:

```auto
// 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…

---

<div class="post-metadata">

**Author:** ![Jean-Rem](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-rem/32/84461_2.png) [@Jean-Rem](https://discourse.nodered.org/u/Jean-Rem)\
**Post date:** [28 November 2024 19:33 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/15 "2024-11-28T19:33:16Z")

</div>

Here is the result I expected:

 ![NR_Test_Example10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/944a0d81a57ed45c410dd6076fe38f3e1ea63b67.png)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [28 November 2024 22:12 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/16 "2024-11-28T22:12:13Z")

</div>

> [@PeterH](#):
>
> 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..

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [28 November 2024 22:22 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/17 "2024-11-28T22:22:23Z")

</div>

> [@Jean-Rem](#):
>
> Here is the result I expected:
> 
> ![NR_Test_Example10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/944a0d81a57ed45c410dd6076fe38f3e1ea63b67.png)

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.

---

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [29 November 2024 10:33 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/18 "2024-11-29T10:33:54Z")

</div>

Done: see [this.](https://github.com/omrid01/node-red-dashboard-2-table-tabulator/issues/6)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [4 December 2024 12:22 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/19 "2024-12-04T12:22:36Z")

</div>

> [@PeterH](#):
>
> 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..

Just released a fix in v0.6.1

---

<div class="post-metadata">

**Author:** ![PeterH](https://avatars.discourse-cdn.com/v4/letter/p/919ad9/32.png) [@PeterH](https://discourse.nodered.org/u/PeterH)\
**Post date:** [4 December 2024 14:09 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/20 "2024-12-04T14:09:31Z")

</div>

Thank you!  
briefly tested: seems to work.

---

<div class="post-metadata">

**Author:** ![hallpauli](https://avatars.discourse-cdn.com/v4/letter/h/7ab992/32.png) [@hallpauli](https://discourse.nodered.org/u/hallpauli)\
**Post date:** [6 December 2024 22:30 UTC](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989/21 "2024-12-06T22:30:47Z")

</div>

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?

[Next page](https://discourse.nodered.org/t/omrid01-node-red-dashboard-2-table-tabulator-setting-colors/92989.md?page=2)