ui-Table with headerMenu

Hello I am new to Node-Red. I am trying to custumize a ui-table and to achieve a headerMenu, to filter which columns can be seen.
I read on this website how to do it, but I cannot figure out how to implement it correctly.

Here is my Flow. Data is coming from sql, then I used a change node.

[
    {
        "id": "0462cda555a23660",
        "type": "inject",
        "z": "65ddc440a6f085cf",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 100,
        "y": 220,
        "wires": [
            [
                "f3a45bd3923ea5c1"
            ]
        ]
    },
    {
        "id": "71a843907371d43a",
        "type": "mysql",
        "z": "65ddc440a6f085cf",
        "mydb": "40d481094a54179f",
        "name": "ssds",
        "x": 470,
        "y": 220,
        "wires": [
            [
                "e58211d106b54b06",
                "83e8f15cf44b7f83"
            ]
        ]
    },
    {
        "id": "f3a45bd3923ea5c1",
        "type": "function",
        "z": "65ddc440a6f085cf",
        "name": "",
        "func": "\nmsg.topic= \"SELECT id, d_guid, wf_process,wf_step, wf_step_status, wf_source_xml FROM workflow WHERE wf_source_xml IS NOT NULL;\";\n\nreturn msg;\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 280,
        "y": 220,
        "wires": [
            [
                "71a843907371d43a"
            ]
        ]
    },
    {
        "id": "580c9efa8ec2d509",
        "type": "ui_table",
        "z": "65ddc440a6f085cf",
        "group": "db8cd67a93390f91",
        "name": "SSDS Alles",
        "order": 1,
        "width": 14,
        "height": "3",
        "columns": [],
        "outputs": 1,
        "cts": true,
        "x": 890,
        "y": 220,
        "wires": [
            [
                "55e2a39a1de6bdd2"
            ]
        ]
    },
    {
        "id": "55e2a39a1de6bdd2",
        "type": "debug",
        "z": "65ddc440a6f085cf",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 890,
        "y": 280,
        "wires": []
    },
    {
        "id": "e58211d106b54b06",
        "type": "debug",
        "z": "65ddc440a6f085cf",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 490,
        "y": 280,
        "wires": []
    },
    {
        "id": "83e8f15cf44b7f83",
        "type": "change",
        "z": "65ddc440a6f085cf",
        "name": "CSS fürs Dashboard",
        "rules": [
            {
                "t": "set",
                "p": "ui_control",
                "pt": "msg",
                "to": "{\"tabulator\":{\"command\":\"headerMenu\",\"columns\":[{\"title\":\"id\",\"field\":\"id\",\"align\":\"center\",\"formatter\":\"text\",\"width\":80,\"headerMenu\":\"headerMenu\",\"layout\":\"fitData\"},{\"title\":\"d_guid\",\"field\":\"d_guid\",\"headerMenu\":\"headerMenu\"},{\"title\":\"wf_process\",\"field\":\"wf_process\",\"editor\":\"select\",\"editorParams\":{\"values\":[\"Postverteilung\",\"Rechnungsprüfung\"]},\"align\":\"center\",\"formatter\":\"text\",\"width\":200,\"headerMenu\":\"headerMenu\",\"layout\":\"fitData\"},{\"title\":\"wf_step\",\"field\":\"wf_step\",\"editorParams\":{\"values\":[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\"]},\"align\":\"center\",\"formatter\":\"text\",\"width\":80,\"editor\":\"select\",\"headerMenu\":\"headerMenu\",\"layout\":\"fitData\"},{\"title\":\"wf_step_status\",\"field\":\"wf_step_status\",\"editorParams\":{\"values\":[\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\"]},\"align\":\"center\",\"formatter\":\"progress\",\"width\":80,\"editor\":\"select\",\"layout\":\"fitData\",\"headerMenu\":\"headerMenu\"},{\"title\":\"wf_source_xml\",\"field\":\"wf_source_xml\",\"align\":\"center\",\"width\":150,\"editor\":\"input\",\"layout\":\"fitData\",\"headerMenu\":\"headerMenu\"}]}}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "ui_control.tabulator.headerMenu",
                "pt": "msg",
                "to": "function(columns){  this.send({ui_control: {'callback':'headerMenu'}});   var menu = [];     var columns = this.getColumns();      for(let column of columns){   let icon = document.createElement(\"i\");         icon.classList.add(\"fas\");         icon.classList.add(column.isVisible() ? \"fa-check-square\" : \"fa-square\");            let label = document.createElement(\"span\");         let title = document.createElement(\"span\");          title.textContent = \" \" + column.getDefinition().title;          label.appendChild(icon);         label.appendChild(title);       menu.push({label:label,action:function(e){     e.stopPropagation();      column.toggle();                    if(column.isVisible()){                     icon.classList.remove(\"fa-square\");                     icon.classList.add(\"fa-check-square\");                 }else{                     icon.classList.remove(\"fa-check-square\");                     icon.classList.add(\"fa-square\");                 }             }         });     }     return menu; };",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 680,
        "y": 220,
        "wires": [
            [
                "580c9efa8ec2d509"
            ]
        ]
    },
    {
        "id": "40d481094a54179f",
        "type": "MySQLdatabase",
        "name": "",
        "host": "127.0.0.1",
        "port": "3306",
        "db": "ssds",
        "tz": "",
        "charset": "UTF8"
    },
    {
        "id": "db8cd67a93390f91",
        "type": "ui_group",
        "name": "Datenbank Alles",
        "tab": "7b1a4975f9ab14cf",
        "order": 2,
        "disp": true,
        "width": "14",
        "collapse": false,
        "className": ""
    },
    {
        "id": "7b1a4975f9ab14cf",
        "type": "ui_tab",
        "name": "Datenbank SSDS",
        "icon": "fa-user-circle fa-2x",
        "disabled": false,
        "hidden": false
    }
]

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.