Dropdown in table

Hello.

I try to implement a dropdown menu into my table.
I read a lot about, that it is the hardest, but best way to create good dashbaords with the tabulator.

But i am asking myselft how to integrate a simple dropdownmenu into a column of my table.
I found some examples but did not understand it.

[
    {
        "id": "ae5cb6b80243bb5e",
        "type": "mqtt in",
        "z": "bb1e74244b8354b7",
        "name": "CIM500/PUMPSTATE",
        "topic": "CIM500/PUMPSTATE",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "10e78a89.5b4fd5",
        "nl": false,
        "rap": false,
        "inputs": 0,
        "x": 200,
        "y": 140,
        "wires": [
            [
                "e4ee73b10b29030c",
                "5f9b993999ef24ac"
            ]
        ]
    },
    {
        "id": "e4ee73b10b29030c",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 4",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 340,
        "y": 220,
        "wires": []
    },
    {
        "id": "5f9b993999ef24ac",
        "type": "function",
        "z": "bb1e74244b8354b7",
        "name": "Key/Value for table",
        "func": "msg.payload= [\n    {\n        \"ActRemoteAccess\": msg.payload.ActRemoteAccess,\n        \"ActDeaerating\": msg.payload.ActDeaerating,\n        \"AnalogueMode\": msg.payload.AnalogueMode,\n        \"ActTimerMode\": msg.payload.ActTimerMode,\n        \"ActSlowMode\": msg.payload.ActSlowMode,\n        \"ActVelocity\": msg.payload.ActVelocity,\n        \"AutoDeaeratingEnable\": msg.payload.AutoDeaeratingEnable,\n        \"FlowControlEnable\": msg.payload.FlowControlEnable,\n        \"ModbusWatchdogEnable\": msg.payload.ModbusWatchdogEnable,\n        \"PulseMemoryEnable\": msg.payload.PulseMemoryEnable\n\n        }\n];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 140,
        "wires": [
            [
                "5e8123e91c967e3c",
                "df124d3bf56a0708"
            ]
        ]
    },
    {
        "id": "5e8123e91c967e3c",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 5",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 540,
        "y": 220,
        "wires": []
    },
    {
        "id": "df124d3bf56a0708",
        "type": "ui_table",
        "z": "bb1e74244b8354b7",
        "group": "5879d49495918d3d",
        "name": "table",
        "order": 2,
        "width": "0",
        "height": "0",
        "columns": [],
        "outputs": 0,
        "cts": false,
        "x": 930,
        "y": 160,
        "wires": []
    },
    {
        "id": "18c8ccde42af7f48",
        "type": "mqtt in",
        "z": "bb1e74244b8354b7",
        "name": "CIM500/MC",
        "topic": "CIM500/PUMPSTATE",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "10e78a89.5b4fd5",
        "nl": false,
        "rap": false,
        "inputs": 0,
        "x": 230,
        "y": 400,
        "wires": [
            [
                "e63ade12e20194f7",
                "8b417611e0370798"
            ]
        ]
    },
    {
        "id": "e63ade12e20194f7",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 10",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 400,
        "y": 480,
        "wires": []
    },
    {
        "id": "8b417611e0370798",
        "type": "function",
        "z": "bb1e74244b8354b7",
        "name": "Key/Value for table",
        "func": "msg.payload= [\n    {\n        \"ActRemoteAccess\": msg.payload.ActRemoteAccess,\n        \"ActDeaerating\": msg.payload.ActDeaerating,\n        \"AnalogueMode\": msg.payload.AnalogueMode,\n        \"ActTimerMode\": msg.payload.ActTimerMode,\n        \"ActSlowMode\": msg.payload.ActSlowMode,\n        \"ActVelocity\": msg.payload.ActVelocity,\n        \"AutoDeaeratingEnable\": msg.payload.AutoDeaeratingEnable,\n        \"FlowControlEnable\": msg.payload.FlowControlEnable,\n        \"ModbusWatchdogEnable\": msg.payload.ModbusWatchdogEnable,\n        \"PulseMemoryEnable\": msg.payload.PulseMemoryEnable\n        }\n];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 490,
        "y": 400,
        "wires": [
            [
                "8dd5148e7b5ec706",
                "7d927ddad188402f"
            ]
        ]
    },
    {
        "id": "8dd5148e7b5ec706",
        "type": "debug",
        "z": "bb1e74244b8354b7",
        "name": "debug 11",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 600,
        "y": 480,
        "wires": []
    },
    {
        "id": "7d927ddad188402f",
        "type": "ui_table",
        "z": "bb1e74244b8354b7",
        "group": "9c78b0d6721c4919",
        "name": "table",
        "order": 2,
        "width": "0",
        "height": "0",
        "columns": [],
        "outputs": 0,
        "cts": false,
        "x": 750,
        "y": 400,
        "wires": []
    },
    {
        "id": "a9d152953783c030",
        "type": "ui_dropdown",
        "z": "bb1e74244b8354b7",
        "name": "",
        "label": "testdropdown",
        "tooltip": "",
        "place": "Select option",
        "group": "5879d49495918d3d",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "an",
                "value": true,
                "type": "bool"
            },
            {
                "label": "aus",
                "value": false,
                "type": "bool"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 820,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "10e78a89.5b4fd5",
        "type": "mqtt-broker",
        "name": "",
        "broker": "185.164.7.227",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "5879d49495918d3d",
        "type": "ui_group",
        "name": "Read",
        "tab": "a42d8adbe9caeb3d",
        "order": 1,
        "disp": false,
        "width": "23",
        "collapse": false,
        "className": ""
    },
    {
        "id": "9c78b0d6721c4919",
        "type": "ui_group",
        "name": "Read",
        "tab": "5f18e4bc12449bfc",
        "order": 1,
        "disp": true,
        "width": "21",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a42d8adbe9caeb3d",
        "type": "ui_tab",
        "name": "Pumpe_01",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "5f18e4bc12449bfc",
        "type": "ui_tab",
        "name": "Pumpe_02",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

I created to tables in two tabs. I assume i must integrate the dropdownmenu somehow into my functionblock, where i assigne the column. thats where i exit right now.

thank you.

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