Node-RED: Tabulator Column Not Hiding

General
,
1

I'm working with Node-RED and using the Tabulator component to display a table. I want to hide the "gender" column based on user input.

In my function node, I have this code:

msg.payload = {
    tbCmd: "hideColumn",
    tbArgs: ["gender"]
};
return msg;

that is my function node. i will give the full flow . if the user is admin it will hide the gender column otherwise it will hide the age column.

[
    {
        "id": "668ecdda037b4e29",
        "type": "function",
        "z": "346e27230dded336",
        "g": "dcfef50ab05d17e3",
        "name": "function 64",
        "func": "// msg.tbCmd = \"tbCreateTable\";\n// msg.tbInitObj = {\n// \theight:200,\n// \tdata:[\n// \t\t{id:1,text:\"Line 1\"},\n// \t\t{id:2,text:\"Line 2\"},\n// \t\t{id:3,text:\"Line 3\"}\n// \t],\n// \tcolumns:[\n// \t\t{title:\"Id\",field:\"id\",width:50,hozAlign:\"center\"},\n// \t\t{title:\"Text\",field:\"text\",width:200,hozAlign:\"left\",editor:\"input\"}\n// \t]\n// }\n\n// return msg;\n\nmsg.tbCmd = \"tbCreateTable\";\nmsg.tbInitObj = {\n    height: 300, // Adjust the height as needed\n    data: [\n        {id: 1, name: \"Alice\", age: 25, gender: \"Female\", country: \"USA\"},\n        {id: 2, name: \"Bob\", age: 30, gender: \"Male\", country: \"Canada\"},\n        {id: 3, name: \"Charlie\", age: 35, gender: \"Male\", country: \"UK\"},\n        {id: 4, name: \"Diana\", age: 28, gender: \"Female\", country: \"Australia\"}\n    ],\n    columns: [\n        {title: \"ID\", field: \"id\", width: 50, hozAlign: \"center\"},\n        {title: \"Name\", field: \"name\", width: 150, hozAlign: \"left\", editor: \"input\"},\n        {title: \"Age\", field: \"age\", width: 100, hozAlign: \"center\", editor: \"input\"},\n        {\n            title: \"Gender\",\n            field: \"gender\",\n            width: 100,\n            hozAlign: \"center\",\n            editor: \"select\",\n            editorParams: {\n                values: {\n                    \"Male\": \"Male\",\n                    \"Female\": \"Female\"\n                }\n            }\n        },\n        {title: \"Country\", field: \"country\", width: 150, hozAlign: \"left\", editor: \"input\"}\n    ],\n      cellEdited: function(cell) {\n        // This function will be called after a cell is edited\n        console.log(\"Cell Edited:\", cell.getField(), \"New Value:\", cell.getValue());\n    }\n};\n\nreturn msg;\n\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 255,
        "y": 60,
        "wires": [
            [
                "93bf13defe0bd934"
            ]
        ],
        "l": false
    }
]

The debug node shows that the payload is correct, but the "gender" column is still visible in the table.

Here’s a quick overview of my flow:

  • Function Node: (Code above)
  • Debug Node: Outputs msg.payload
    I’ve checked that the column name is correct, but it’s still not hiding.

Can anyone help me figure out why this is happening? Thanks!

2

Hi,
The table is not constructed properly - you placed a function ( cellEdited() ) in the initialization object. Once the function is removed, hideColumn works.

I deliberately do not support functions within msg objects (while technically possible, it imposes a 'code injection' security risk).

You can register to the cellEdited event and get notifications (with before & after values) when cells are edited.

3

Have you decided not to support functions in the table definition, such as custom formatter functions? I was hoping for a workaround. Custom formatters were often used in the dashboard-1.0 tabulator node (ui-table), as it was possible to include serialized functions in the tabulator object definition, for instance if you want to display table data with units without altering the data itself:

"formatter": "function(cell, formatterParams, onRendered) { const val = cell.getValue(); return val ? val + ' °C' : '';}"

Sometimes you want to keep numerical data strictly numerical when sorting or filtering. Is there a way to display data with units in the current version of ui-tabulator, without affecting the data itself? If you are reluctant to supporting formatter functions, maybe there's some other way displaying units could be supported, like the tbSetStyle command.

1 Like
4

I fully realize the power & flexibility of Tabulator functions, such as custom formatters, and use them a lot myself.
The ui-tabulator node was built, in the spirit of Node-RED, for low-code, "black-box" implementations. It is always possible (as I do many times) to instantiate Tabulator within a Node-RED ui-template node and access its API directly to unleash its full capabilities.

While Node-RED messages can include function properties, which can be sent & used across the flow, once a message is sent to a dashboard widget it is being stripped off any function properties. If I serialize/deserialize function code, it will immediately flag the node as insecure (our company's Node-RED flows are deployed at very big Telecom operators and are constantly scanned for security vulnerabilities).

I plan to add some formatting templates, like in tbGroupBy (where you can place $field, $value and $count tokens in a format template string).)

In the meantime, you can try using existing formatters (e.g. the lookup formatter, or HTML formatter with CSS logic).
Or simply format the data update message itself, before it is sent to the ui-tabulator node.

5

I think I found a way to allow adding function attributes in a safe way. For now, I will add this in the next release as an experimental/undocumented feature. Of course, this will put responsibility on the user to provide valid function code.

6

@omrid01/node-red-dashboard-2-table-tabulator v0.6.0 has been released, and it now supports function attributes.

1 Like