Node-red-dashboard-2-table-tabulator and icon

Dashboard
,
1

Hello

I am using node-red-dashboard-2-table-tabulator v0.8.2 with nodered v4.1.0
I would like to add an icon in the first column of each row

Here is the configuration

{
"height": 200,
"layout": "fitColumns",
"columns": [
{"field":"id","visible":false},
{"title":"Name","field":"name","width":200,"hozAlign":"left"},
{"title":"Age","field":"gender","width": 100,"hozAlign":"center"},
{"formatter":"@F:printIcon", "width":50, "hozAlign":"center"}
]
}

function printIcon(cell, formatterParams, onRendered) {
return '';
};

I downloaded font-awesome to this place

.node-red\node_modules@omrid01\node-red-dashboard-2-table-tabulator\fontawesome\css

and I used ui-template with

image
image856×401 13.6 KB

What did I do wrong ?

Here is the full code

[
    {
        "id": "1de7e8489cf59eee",
        "type": "tab",
        "label": "Flux 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "41890ffcff95c8d4",
        "type": "ui-tabulator",
        "z": "1de7e8489cf59eee",
        "name": "",
        "group": "eb610579a53cbe25",
        "initObj": "{\n   \"height\": 200,\n   \"layout\": \"fitColumns\",\n   \"columns\": [\n      {\"field\":\"id\",\"visible\":false},\n      {\"title\":\"Name\",\"field\":\"name\",\"width\":200,\"hozAlign\":\"left\"},\n      {\"title\":\"Age\",\"field\":\"gender\",\"width\": 100,\"hozAlign\":\"center\"},\n      {\"formatter\":\"@F:printIcon\", \"width\":50, \"hozAlign\":\"center\"}\n   ]\n}",
        "funcs": "function printIcon(cell, formatterParams, onRendered) {\r\n    return '<i class=\"fa fa-print\"></i>';\r\n};\r\n  ",
        "allowMsgFuncs": false,
        "maxWidth": "",
        "events": "",
        "order": 1,
        "multiUser": false,
        "validateRowIds": false,
        "themeCSS": "",
        "themeFile": "",
        "tblDivId": "",
        "printToLog": false,
        "width": 0,
        "height": 0,
        "x": 680,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "a0d813a67eff96be",
        "type": "inject",
        "z": "1de7e8489cf59eee",
        "name": "",
        "props": [
            {
                "p": "tbCmd",
                "v": "setData",
                "vt": "str"
            },
            {
                "p": "tbArgs",
                "v": "[[{\"id\":1,\"name\":\"bob\",\"gender\":\"male\",\"icon\":\"\"},{\"id\":2,\"name\":\"Jenny\",\"gender\":\"female\",\"icon\":\"\"}]]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 470,
        "y": 480,
        "wires": [
            [
                "41890ffcff95c8d4"
            ]
        ]
    },
    {
        "id": "873bc3ebb23d8f11",
        "type": "ui-template",
        "z": "1de7e8489cf59eee",
        "group": "",
        "page": "8b265c748a7ac36e",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n<link rel=\"stylesheet\" href=\"/resources/@omrid01/node-red-dashboard-2-table-tabulator/font-awesome/css/font-awesome.min.css\">\n</template>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 570,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "eb610579a53cbe25",
        "type": "ui-group",
        "name": "Group 1",
        "page": "8b265c748a7ac36e",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": true,
        "disabled": false,
        "groupType": "default"
    },
    {
        "id": "8b265c748a7ac36e",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "f2d3bbf8197fdaf7",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "2b094c35cd0cde05",
        "breakpoints": [
            {
                "name": "Default",
                "px": 0,
                "cols": 3
            },
            {
                "name": "Tablet",
                "px": 576,
                "cols": 6
            },
            {
                "name": "Small Desktop",
                "px": 768,
                "cols": 9
            },
            {
                "name": "Desktop",
                "px": 1024,
                "cols": 12
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f2d3bbf8197fdaf7",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "2b094c35cd0cde05",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "f50b503f5c1c5cf1",
        "type": "global-config",
        "env": [],
        "modules": {
            "@omrid01/node-red-dashboard-2-table-tabulator": "0.8.2",
            "@flowfuse/node-red-dashboard": "1.30.1"
        }
    }
]
2

First of all, I recommend not to put the font-awesome package or any other custom resources inside the node's default resources folder, since it gets wiped out whenever the node is reinstalled or updated. I suggest setting a "safe" location as a static HTTP root in settings.js. for example:

	httpStatic: [{path:"C:/Dev/Node-red/WebRoot/",root:"NR_WebRoot"}],

Then pointing to it like this:

<template>
    <link rel="stylesheet" href="/NR_WebRoot/FA/font-awesome/css/font-awesome.min.css">
</template>

As for your code, it seems that the @F:printIcon() function is not returning an icon class:

It should return something like

"<i class='fa fa-print'></i>"

Here's a working example:

Table confiuration:

{
   "height": 200,
   "layout": "fitColumns",
   "columns": [
      {"field": "id","visible": false},
      {"field": "prt","width": 40,"hozAlign": "center","formatter": "@F:()=>{return \"<i class='fa fa-print'></i>\"}"},
      {"title":"Name","field":"name","width":200,"hozAlign":"left"},
      {"title":"Age","field":"age","width": 100,"hozAlign":"center"}
   ],
   "data": [
      {"id":1,"name":"John Brown", "age":30},
      {"id":2,"name":"Betty Clark", "age":25}
   ]
}

Note that as an alternative to defining an F@: function (e.g. printIcon) in the node config's Functions area, you can also specify the function body inline in the table configuration:

{"field": "prt","width": 40,"hozAlign": "center","formatter": "@F:()=>{return \"<i class='fa fa-print'></i>\"}"},

Result:

image
image396×125 2.23 KB

3

Thanks for your answer !
I did everything you told and it does not work better !

image
image415×230 4.03 KB

Here is my code

[
    {
        "id": "1de7e8489cf59eee",
        "type": "tab",
        "label": "Flux 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "41890ffcff95c8d4",
        "type": "ui-tabulator",
        "z": "1de7e8489cf59eee",
        "name": "",
        "group": "eb610579a53cbe25",
        "initObj": "{\n   \"height\": 200,\n   \"layout\": \"fitColumns\",\n   \"columns\": [\n      {\"field\":\"id\",\"visible\":false},\n      {\n         \"width\": 40,\n         \"hozAlign\": \"center\",\n         \"formatter\": \"@F:()=>{return \\\"<i class='fa-solid fa-print'></i>\\\"}\",\n         \"visible\":true\n      },\n      {\n         \"title\": \"Age\",\n         \"field\": \"gender\",\n         \"width\": 100,\n         \"hozAlign\": \"center\"\n      },\n      {\"title\":\"Name\",\"field\":\"name\",\"width\":200,\"hozAlign\":\"left\"}\n   ]\n}",
        "funcs": "",
        "allowMsgFuncs": false,
        "maxWidth": "",
        "events": "",
        "order": 1,
        "multiUser": false,
        "validateRowIds": false,
        "themeCSS": "",
        "themeFile": "",
        "tblDivId": "",
        "printToLog": false,
        "width": 0,
        "height": 0,
        "x": 680,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "a0d813a67eff96be",
        "type": "inject",
        "z": "1de7e8489cf59eee",
        "name": "",
        "props": [
            {
                "p": "tbCmd",
                "v": "setData",
                "vt": "str"
            },
            {
                "p": "tbArgs",
                "v": "[[{\"id\":1,\"name\":\"bob\",\"gender\":\"male\"},{\"id\":2,\"name\":\"Jenny\",\"gender\":\"female\"}]]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 470,
        "y": 480,
        "wires": [
            [
                "41890ffcff95c8d4"
            ]
        ]
    },
    {
        "id": "873bc3ebb23d8f11",
        "type": "ui-template",
        "z": "1de7e8489cf59eee",
        "group": "",
        "page": "8b265c748a7ac36e",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <link rel=\"stylesheet\" href=\"/ressources/fontawesome/css/all.css\">\n</template>\n\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 670,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "eb610579a53cbe25",
        "type": "ui-group",
        "name": "Group 1",
        "page": "8b265c748a7ac36e",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": true,
        "disabled": false,
        "groupType": "default"
    },
    {
        "id": "8b265c748a7ac36e",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "f2d3bbf8197fdaf7",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "2b094c35cd0cde05",
        "breakpoints": [
            {
                "name": "Default",
                "px": 0,
                "cols": 3
            },
            {
                "name": "Tablet",
                "px": 576,
                "cols": 6
            },
            {
                "name": "Small Desktop",
                "px": 768,
                "cols": 9
            },
            {
                "name": "Desktop",
                "px": 1024,
                "cols": 12
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f2d3bbf8197fdaf7",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "2b094c35cd0cde05",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "c1921a4f77be1c30",
        "type": "global-config",
        "env": [],
        "modules": {
            "@omrid01/node-red-dashboard-2-table-tabulator": "0.8.2",
            "@flowfuse/node-red-dashboard": "1.30.1"
        }
    }
]

this is the directory ressources

image
image871×705 35.2 KB

and the file settings.js

    httpStatic: [
        {path: '.node-red/ressources/images',    root: "images"},
	{path: '.node-red/ressources',    root: "ressources"}
    ],

what did i do wrong ? thanks in advance for your help

4

Let me check

5

Thanks for your time :slight_smile:

6

Change your ui-template to type "widget" instead of "CSS". (with this, your flow is working on my PC).

BTW, when defining an httpStatic, you don't need to define a dedicated root for each sub-folder. It is enough to set the topmost folder (e.g. define {path: '.node-red/ressources', root: "ressources"}, and then call "ressources/myScript.js", "ressources/images/myImage.jpg" etc.)

7

Great !!!
It works !
Thanks a lot : I thought the solution would be that simple. But unfortunately, my knowledge of CSS and its use is practically nonexistent... a true dummy !