Ui_table with dropdown column

Dashboard
1

Hi there,

I am trying to set a "dropdown" column following tabulator's documentation example (Tabulator) but I'm not able to successfully achieve it. Making some tests I managed to make the column editable but just for plain text input, not a dropdown.

I leave the flow right here:

[
    {
        "id": "a53a1e085b1507be",
        "type": "ui_table",
        "z": "b8048011c754ab11",
        "group": "e24d17dca3fcc92c",
        "name": "Table",
        "order": 7,
        "width": "24",
        "height": "7",
        "columns": [
            {
                "field": "Number",
                "title": "Number",
                "width": "",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Description",
                "title": "Description",
                "width": "",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Status",
                "title": "Status",
                "width": "",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 1,
        "cts": true,
        "x": 306,
        "y": 1048,
        "wires": [
            []
        ]
    },
    {
        "id": "bafec392beede67a",
        "type": "inject",
        "z": "b8048011c754ab11",
        "name": "Data",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"Number\":1,\"Description\":\"Step 1 random text abcd\",\"Status\":1},{\"Number\":2,\"Description\":\"Step 2 random text abcd\",\"Status\":1},{\"Number\":3,\"Description\":\"Step 3 random text abcd\",\"Status\":1},{\"Number\":4,\"Description\":\"Step 4 random text abcd\",\"Status\":1},{\"Number\":5,\"Description\":\"Step 5 random text abcd\",\"Status\":1}]",
        "payloadType": "json",
        "x": 130,
        "y": 1048,
        "wires": [
            [
                "3f6a8eeffe2b7856"
            ]
        ]
    },
    {
        "id": "3f6a8eeffe2b7856",
        "type": "change",
        "z": "b8048011c754ab11",
        "name": "Template",
        "rules": [
            {
                "t": "set",
                "p": "ui_control",
                "pt": "msg",
                "to": "{\"tabulator\":{\"columnResized\":\"function(column){var newColumn = {         field: column._column.field,         visible: column._column.visible,         width: column._column.width,         widthFixed: column._column.widthFixed,         widthStyled: column._column.widthStyled     }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }\",\"columnMoved\":\"function(column, columns){     var newColumns=[];     columns.forEach(function (column) {         newColumns.push({'field': column._column.field});     });     this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }\",\"groupHeader\":\"function (value, count, data, group) {return value + \\\"<span style='color:#d00; margin-left:10px;'>(\\\" + count + \\\" Termostat\\\"+((count>1) ? \\\"e\\\" : \\\"\\\") + \\\")</span>\\\";}\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Number\",\"field\":\"Number\",\"align\":\"left\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Description\",\"field\":\"Description\",\"align\":\"left\",\"editor\":\"false\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Status\",\"field\":\"Status\",\"align\":\"left\",\"editor\":\"list\",\"editorParams\":{\"values\":{\"0\":\"0\",\"1\":\"1\",\"2\":\"2\",\"4\":\"4\"}}}],\"cellEdited\":\"function(cell){var change = {newValue:cell.getValue()};this.send({topic:this.config.topic,ui_control:{callback:'cellEdited',changes:change}});}\",\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"}}",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 215,
        "y": 1048,
        "wires": [
            [
                "a53a1e085b1507be"
            ]
        ],
        "l": false
    },
    {
        "id": "e24d17dca3fcc92c",
        "type": "ui_group",
        "name": "Table",
        "tab": "ef45af5449f77c14",
        "order": 1,
        "disp": false,
        "width": "24",
        "collapse": false,
        "className": ""
    },
    {
        "id": "ef45af5449f77c14",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Any hint about how to do it? Which version of tabulator uses node-red-node-ui-table:0.3.12? (Maybe this functionality is not supported in current version?)

Nodes info:
node-red:2.1.3
node-red-dashboard:3.1.7
node-red-node-ui-table:0.3.12

Thanks!

2

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