# Ui-table supports ui\_control

**URL:** <https://discourse.nodered.org/t/ui-table-supports-ui-control/18870>\
**Category:** Dashboard\
**Created:** [6 December 2019 16:05 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870 "2019-12-06T16:05:57Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [7 August 2020 17:24 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/21 "2020-08-07T17:24:37Z")

</div>

aha - thanks . I assume I was doing something wrong in not being able to get that id field.  
I have just tried id:cell.getRow().getIndex() - and it works if I now include id back into the input payload. !!

Do you know how to turn off the 'noise' that is being pushed out to msg.payload.  
I only have a cellEdited callback as I want to be able to update single cells in a column. Not bothered about anything else. so I have no other callbacks specified.

Yet, I am finding that If I simply click on any cell in any row, I get a message pushed out to debug.  
I do not have cellClick callback present. The only output that I want to get from the table is the cellEdited - and that piece is working fine.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [7 August 2020 23:06 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/22 "2020-08-07T23:06:12Z")

</div>

Hi Dave,

the `chellClick` callback is part of the "vanilla" function of ui-table. See info panel.

You can disable it by sending a empty string.

```auto
{
  "payload":null,
  "ui_control":
    {"tabulator":{"cellClick":""}}
}

```

or an empty function.  
This is due to the mix iterative configuration based on the core functionalities.

A) core configuration done inside the editor ui  
B) merge any additional config via ui\_control

Hope this helps.

---

<div class="post-metadata">

**Author:** ![davej](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/davej/32/25150_2.png) [@davej](https://discourse.nodered.org/u/davej)\
**Post date:** [7 August 2020 23:51 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/23 "2020-08-07T23:51:55Z")

</div>

oh jeez. Where is that documented?  
I have spent some hours wading through the Tabulator doc and what there is of UI Table but never came across this.

You say look in the **info panel** - I am but not seeing it ???.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [8 August 2020 06:05 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/24 "2020-08-08T06:05:04Z")

</div>

Hi Dave,  
I meant vanilla Node-RED dashboard widget ui-table not tabulator directly.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/539aaacd649b589e26ff4c44e371327feb470150.png)

To achieve this function the `cellClick` callback is used.  
I know the latest ui-control feature upgrade is not documented in detail. Most is described by the example flow. Sorry for that it is only lack of time that docs are not always up to date. (BTW who RTFM anyway? - I do but ...)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [8 August 2020 06:31 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/25 "2020-08-08T06:31:00Z")

</div>

In addition for anybody interested:

How customizing ui-table with ui\_controll messages work is:

- tabulator is configured by the settings in the editor UI
- messages with a `msg.ui_control` object will **add** or **modify** features of tabulator. It do not replace the configuration done in the UI
- subsequent ui\_control messages are **merged** into the tabulator object! So they do not replace the existing config
- you can modify existing column config of individual columns. The column is matched by the `field` property.
- if you do not pass a payload with in your msg to ui-table containing `ui_control` the payload has to be `null` (this is necessary to trick the dashboard a little bit to pass ui\_control objects unaltered to ui-table to perform the merge and column matching)

This is the default tabulator configuration:

```auto
{
  layout: 'fitColumns',
  autoColumns: columndata.length == 0,
  movableColumns: true,
  cellClick: 'function(e, cell) { $scope.send({topic:cell.getField(), payload:cell.getData(), row:(cell.getRow()).getPosition()}); };'
  columns: columndata,
  data: tabledata,
}

```

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [1 September 2020 11:50 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/27 "2020-09-01T11:50:06Z")

</div>

Hello Christian,

I would like to ask, how do you do this 2 Colum Group ( Measurment & Settings) with other Columns? Because I try but I get only 1 ( the last in the column list).

here is my code of ui\_control:

{  
"formatterParams": {  
"target": "\_blank"  
},  
"title": "Measurements",  
"columns": [  
{  
"title": "Value",  
"field": "sensor\_value",  
"formatter": "plaintext",  
"align": "center"  
},  
{  
"title": "Units",  
"field": "units",  
"formatter": "plaintext",  
"align": "center",  
"width": 50  
}  
]  
},  
{  
"formatterParams": {  
"target": "\_blank"  
},  
"title": "Location",  
"columns": [  
{  
"title": "Latitude",  
"field": "lat",  
"formatter": "plaintext"  
},  
{  
"title": "Longitude",  
"field": "long",  
"formatter": "plaintext",  
"align": "center"  
}  
]  
}

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [1 September 2020 13:04 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/29 "2020-09-01T13:04:08Z")

</div>

So Is that I can get it, the three structure is not perfect decoded ??

```auto
{
   "formatterParams": {
   "target": "_blank"
     },
        "title": "Measurements",
         "columns": [
               {
                  "title": "Value",
                  "field": "sensor_value",
                  "formatter": "plaintext",
                  "align": "center"
               },
               {
                  "title": "Units",
                  "field": "units",
                  "formatter": "plaintext",
                  "align": "center",
                  "width": 50
             }
           ]
        },
        {
           "formatterParams": {
                 "target": "_blank"
            },
            "title": "Location",
            "columns": [
                  {
                      "title": "Latitude",
                       "field": "lat",
                       "formatter": "plaintext"
                  },
                  {
                       "title": "Longitude",
                       "field": "long",
                       "formatter": "plaintext",
                       "align": "center"
                  }
            ]
        }

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [1 September 2020 13:53 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/31 "2020-09-01T13:53:26Z")

</div>

> [@JVergara](#):
>
> `formatterParams`

You only need for URL links to open the link on a new Tab. Can be deleted

Something is missing at the beginning too. Please refer to one of the examples of ui-table for a complete JSON object.  
Perhaps paste your JSON into a JSON editor (Any node red node which imput field you can switch to json like the change node / online validators / vs code or similar) and validate it.

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [1 September 2020 14:08 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/32 "2020-09-01T14:08:21Z")

</div>

here is my complete json;

```auto
{
    "tabulator": {
        "columnHeaderVertAlign": "middle",
        "columns": [
            {
                "title": "Timestamp",
                "field": "scantime",
                "formatter": "datetime",
                "formatterParams": {
                    "inputFormat": "YYYY-MM-DD HH:mm:ss)",
                    "invalidPlaceholder": "(invalid date)"
                },
                "minwidth": 150,
                "align": "center"
            },
            {
                "title": "UID / ID",
                "field": "ID",
                "formatter": "plaintext",
                "headerFilter": "id",
                "minwidth": 100,
                "align": "center"
            },
            {
                "title": "Type",
                "field": "type",
                "formatter": "plaintext",
                "align": "center"
            },
            {
                "title": "Measurements",
                "columns": [
                    {
                        "title": "Value",
                        "field": "sensor_value",
                        "formatter": "progress",
                        "formatterParams": {
                            "min": -50,
                            "max": 50,
                            "color": [
                                "blue",
                                "green",
                                "red"
                            ],
                            "legend": "function (value) {return '&nbsp;&nbsp;'+value;}",
                            "legendColor": "#101010",
                            "legendAlign": "left"
                        }
                    },
                    {
                        "title": "Units",
                        "field": "units",
                        "formatter": "plaintext",
                        "align": "center",
                        "width": 50
                    }
                ]
            },
            {
                "title": "Location",
                "columns": [
                    {
                        "title": "Latitude",
                        "field": "lat",
                        "formatter": "plaintext",
                        "width": 60
                    },
                    {
                        "title": "Longitude",
                        "field": "long",
                        "formatter": "plaintext",
                        "align": "center",
                        "width": 60
                    }
                ]
            },
            {
                "title": "NDEF content",
                "field": "content",
                "formatter": "plaintext",
                "align": "center"
            }
        ],
        "layout": "fitColumns",
        "movableRows": false,
        "groupBy": ""
    },
    "customHeight": 12
}

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [1 September 2020 14:13 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/33 "2020-09-01T14:13:15Z")

</div>

Looks good ... and on the console?  
And a screenshot would be helpfully (simply copy paste here)

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [1 September 2020 14:15 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/34 "2020-09-01T14:15:17Z")

</div>

I have some Table Header:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fbbf501a12b69656e5841891a71f9d655097f090.png)

But I would like with some like Measurement Group for location  
Location  
Latitude | Longitude

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [1 September 2020 14:26 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/35 "2020-09-01T14:26:33Z")

</div>

Strange ... I see your problem now but can't find a solution without testing it on node-red.

Hope I find time this evening.

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [1 September 2020 14:35 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/36 "2020-09-01T14:35:37Z")

</div>

Ok thanks. I wait you feedback 🙂

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [2 September 2020 07:33 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/37 "2020-09-02T07:33:12Z")

</div>

My console output:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/9/e93b1175eac2c30712d0546ec1e1fd96f57f6913.png)

1. columnHeaderVertAlign perhaps a problem in the docs ... ?
2. minWidth! Tabulator uses [camelCase](https://en.wikipedia.org/wiki/Camel_case) (seems there ist a bug in the config-ui defined tables too.
3. ditto.
4. check how to use filters. Not with filed names!

But to your initial problem: still strange... sorry I have to dig deeper and currently no time.

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [2 September 2020 08:34 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/38 "2020-09-02T08:34:24Z")

</div>

Ok Thanks so much. I try to solve with this warning.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [2 September 2020 21:54 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/39 "2020-09-02T21:54:43Z")

</div>

Hi.  
There is a bug in the merging process of ui\_control messages on column groups. Hopefully I can fix that over the weekend.  
Sorry.

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [3 September 2020 05:50 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/40 "2020-09-03T05:50:51Z")

</div>

Ok thanks you!!

---

<div class="post-metadata">

**Author:** ![JVergara](https://avatars.discourse-cdn.com/v4/letter/j/85e7bf/32.png) [@JVergara](https://discourse.nodered.org/u/JVergara)\
**Post date:** [4 September 2020 06:21 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/41 "2020-09-04T06:21:48Z")

</div>

Hello Christian-Me ,

sorry I have some another questions about table. I would like use these 'Theme' of Tabulator ( [http://tabulator.info/docs/4.7/theme](http://tabulator.info/docs/4.7/theme)) to change the format and visualization of my table. Its will be possible to do with ui\_control message or another method ? because I try to do with the template\_ui but I don't see any change in my table.

Thanks very much.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [7 September 2020 21:06 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/42 "2020-09-07T21:06:51Z")

</div>

Found and fixed the problem. Will be available soon:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e0344720a36cf4d460a9e8bdb88190996f4a1acc.png)

To the css loading. It should be possible as others solved some issues by editing the css. But sorry, I don't know how - not the css / template guy. perhaps do a search on "ui-table css" to get any hints. There are only two css directly available "tabulator.css" and "midnight.css" depending on your ui scheme.

Chris

---

<div class="post-metadata">

**Author:** ![rce](https://avatars.discourse-cdn.com/v4/letter/r/d9b06d/32.png) [@rce](https://discourse.nodered.org/u/rce)\
**Post date:** [7 October 2020 12:08 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/43 "2020-10-07T12:08:08Z")

</div>

Hi,  
I'm trying to retrieve the data from a table, but i'm not sure how to do this. I would use the getData() function from tabulator + this.send command I guess, but i'm lost on how to make it work. Anyone to put me in the right direction?

[Previous page](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870.md?page=1)

[Next page](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870.md?page=3)