# Ui\_table with dropdown column

**URL:** <https://discourse.nodered.org/t/ui-table-with-dropdown-column/64323>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [24 June 2022 10:17 UTC](https://discourse.nodered.org/t/ui-table-with-dropdown-column/64323 "2022-06-24T10:17:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)\
**Post date:** [24 June 2022 10:17 UTC](https://discourse.nodered.org/t/ui-table-with-dropdown-column/64323/1 "2022-06-24T10:17:21Z")

</div>

Hi there,

I am trying to set a "dropdown" column following tabulator's documentation example ([Tabulator](http://www.tabulator.info/examples/5.2#editable)) 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:

```auto
[
    {
        "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!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 July 2022 10:17 UTC](https://discourse.nodered.org/t/ui-table-with-dropdown-column/64323/2 "2022-07-24T10:17:31Z")

</div>

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