# Examples for node-red-node-ui-table

**URL:** <https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256>\
**Category:** Dashboard\
**Created:** [12 August 2019 17:52 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256 "2019-08-12T17:52:43Z")\
**Posts on this page:** 20\
**Page:** 4

<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:** [3 January 2020 18:45 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/61 "2020-01-03T18:45:46Z")

</div>

As I have zero knowledge in the field of css I would go the javascript (or better: some simple modifications in the column config JSON via ui\_control) route.

I don`t even know if vertical align possible with with css.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [4 January 2020 10:09 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/62 "2020-01-04T10:09:30Z")

</div>

Ah. I missed your point earlier, Christian. I'll have a look at it. I just found the corresponding example.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [8 January 2020 12:27 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/63 "2020-01-08T12:27:25Z")

</div>

I am there, finally 🙂

1. I managed to also vertically align text with the addition of _padding-top_ to my ui-template.
2. I additionally hid the sort arrows in the header column and extended the header cells width with _visibility_ and _padding-right_ to create extra space for titles. Sorting via column click still works 🙂
3. And finally I was able to align text in header cells differently for each cell with f.e. _\>p style="text-align:center;"\>∆°C\</p\<_ .... (just change \>\< at the beginning/end of this argument 😉) in the title field of ui-table node

My final CSS-ui-template (just assign ui-template node to your ui-table's group)::

```auto
[{"id":"eca62c1a.40bdf8","type":"ui_template","z":"113a5c80.015354","group":"f181724f.1e4828","name":"CSS: ui-table","order":1,"width":"0","height":"0","format":"<style>\n\n/* Tabelle selbst formatieren*/\n\n .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#202529;font-size:18px}\n\n/* Header formatieren */\n .tabulator .tabulator-header{border-bottom:1px solid #BBB;background-color:#202529}\n .tabulator-col-content{background-color:#202529;height:37px}\n .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#202529}\n .tabulator-arrow{visibility: collapse;}\n .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}\n\n/* Zellen formatieren*/\n .tabulator-row{min-height:31px;background-color:#181c1f}\n .tabulator-row:nth-child(2n){background-color:#202529}\n .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}\n\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1250,"y":3340,"wires":[[]]},{"id":"f181724f.1e4828","type":"ui_group","z":"","name":"Raumklima","tab":"5a91a4b3.406c04","order":5,"disp":true,"width":"6","collapse":true},{"id":"5a91a4b3.406c04","type":"ui_tab","z":"","name":"Zentral","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

My final table:

 ![Bildschirmfoto 2020-01-08 um 13.22.39](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/22d5b84fd432e7fca3690016657881f20d1ddd22.jpeg)

DISCLAIMER: I am not at all a developer. However, I do like puzzles like this. Hence I was digging and searching until I found a "solution" for me ... at least 😃

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 January 2020 19:53 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/64 "2020-01-08T19:53:35Z")

</div>

That's a good looking table ! well done.

---

<div class="post-metadata">

**Author:** ![catanto](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catanto](https://discourse.nodered.org/u/catanto)\
**Post date:** [20 January 2020 09:25 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/65 "2020-01-20T09:25:54Z")

</div>

Hi, I'm having serious problems in creating a progress bars with changing colours. How could you do that?

---

<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:** [20 January 2020 09:30 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/66 "2020-01-20T09:30:49Z")

</div>

This is done by a callback function.

> [@Ui-table supports ui\_control](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870):
>
> Hello all, ui-table supports now sending msg.ui\_control messages to have more possibilities to style your dashboard table: or with grouping Example flow included but many other things should be possible. This Example is "generated" by data collected by my home automation system thermostat giving a compact overview of all values and settings with only one ui-node. Curious to see what you can do with it. Comments always welcome. Chris

There is an example included producing exactly the table from the screenshot.

---

<div class="post-metadata">

**Author:** ![gitjps](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gitjps/32/13048_2.png) [@gitjps](https://discourse.nodered.org/u/gitjps)\
**Post date:** [7 February 2020 21:28 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/67 "2020-02-07T21:28:45Z")

</div>

Maybe a newbie question , how exactly does optional output work? I'd like to get a trigger once a user clicks on a row. Any examples?

---

<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 February 2020 21:38 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/68 "2020-02-07T21:38:21Z")

</div>

As described in the info panel:  
The msg.payload contains the selected row data object. msg.row the row number and msg.topic the column.  
Place a debug node behind set to output the full message object and see what happens.

---

<div class="post-metadata">

**Author:** ![gitjps](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gitjps/32/13048_2.png) [@gitjps](https://discourse.nodered.org/u/gitjps)\
**Post date:** [8 February 2020 06:41 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/69 "2020-02-08T06:41:57Z")

</div>

thx, and I also checked this 😉

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/820a42e204c5bd0586c365d289470d404760bb5e.png)

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [23 February 2020 06:15 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/70 "2020-02-23T06:15:43Z")

</div>

> [@Christian-Me](#):
>
> The msg.payload contains the selected row data object. msg.row the row number and msg.topic

I assume msg.payload is generated from the Tabulator rowClick callback? Is there any way of utilising the other Tabulator callbacks?

Thanks

---

<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:** [23 February 2020 08:50 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/71 "2020-02-23T08:50:24Z")

</div>

It actually uses `cellClick` but never mind.

Yes it is. You can use `msg.ui_control` send other callbacks to tabulator or even take control over the complete layout. See some posts before 😉 [Ui-table supports ui\_control](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870)

I use this to do the complete setup of my tables.

_A little tip: I use a change node emitting a json object (or most of the time a sub flow with a json environment variable) to configure ui-table and do other things. I write the callback functions in vs-code (but the editor of a function node is fine too). Then I use the visual json editor to paste in the function. All escape sequencing of `" to \"` is done automatically_

```json
    "tabulator": {
        "responsiveLayout": "collapse",
        "responsiveLayoutCollapseStartOpen": false,
        "index": "$name",
        "layout": "fitColumns",
        "movableColumns": true,
        "groupBy": "",
        "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.definition.field, 'title': column._column.definition.title}); }); this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }",
        "rowFormatter": "function(row){ var data = row.getData(); switch (data.$state) { case \"lost\": row.getElement().style.backgroundColor = \"#9e2e66\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"sleeping\": row.getElement().style.backgroundColor = \"#336699\"; break; case \"disconnected\": row.getElement().style.backgroundColor = \"#cc3300\"; row.getElement().style.color = \"#a6a6a6\"; break; case \"alert\": row.getElement().style.backgroundColor = \"#A6A6DF\"; break; case \"init\": row.getElement().style.backgroundColor = \"#f2f20d\"; break; case \"ready\": row.getElement().style.backgroundColor = \"\"; row.getElement().style.color = \"\"; break; } }",
        "columns": [
            {
                "formatter": "responsiveCollapse",
                "width": 30,
                "minWidth": 30,
                "align": "center",
                "resizable": false,
                "headerSort": false,
                "frozen": true,
                "title": "expand",
                "field": "expand",
                "headerVertical": "flip"
            },
            {
                "formatter": "function(cell, formatterParams, onRendered) { var html = cell.getValue(); return html; }",
                "title": "State",
                "field": "$stateIcon",
                "width": 100,
                "frozen": true,
                "headerVertical": "flip"
            },
´´´
--- cutted here ---
```

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [23 February 2020 08:53 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/72 "2020-02-23T08:53:58Z")

</div>

Once again thanks for the tip. It was the weird syntax that got me, as usual 🙂

---

<div class="post-metadata">

**Author:** ![lalo](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lalo](https://discourse.nodered.org/u/lalo)\
**Post date:** [2 March 2020 19:11 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/73 "2020-03-02T19:11:34Z")

</div>

@T0T4R4 can you share your flow?

---

<div class="post-metadata">

**Author:** ![bilalmahmad](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@bilalmahmad](https://discourse.nodered.org/u/bilalmahmad)\
**Post date:** [13 April 2020 19:30 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/74 "2020-04-13T19:30:16Z")

</div>

Hi Guys, New to node-red.  
Is it possible to have an example of replaceData commands to ui-table.

I'd like to to update a particular cell in table.

Many Thanks.

---

<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:** [13 April 2020 21:06 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/75 "2020-04-13T21:06:33Z")

</div>

Best is to use the addOrUpdate command (take a look at the example ui-table and commands menu/import/examples/ui-table)

---

<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:** [14 April 2020 06:13 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/76 "2020-04-14T06:13:57Z")

</div>

Now I`m back on my computer and can give you a litle bit more info

```auto
msgToTable.payload={
    "command":"updateOrAddData",
    "arguments": [[{"id":123,"columnField":"updated"},{"id":124,"columnField":"new"}]],
    "returnPromise": false
};

```

To update a single cell (or many cells in a row) the row has to be identified. By default the field `id` is defined for that purpose but it can be changed by "index":"anyField". If the value of the index property isn't in the table a new row will be added (if id 124 is not present).

---

<div class="post-metadata">

**Author:** ![happytm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/happytm/32/7058_2.png) [@happytm](https://discourse.nodered.org/u/happytm)\
**Post date:** [5 June 2020 21:44 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/77 "2020-06-05T21:44:47Z")

</div>

Just came across this new table plugin code. is it better to use it instead of Tabulator ? It is new repo and certainly looks like lightweight ,simpler and promising.

> **[grid-js/gridjs](https://github.com/grid-js/gridjs)**
>
> Advanced table plugin. Contribute to grid-js/gridjs development by creating an account on GitHub.

  

> **[Grid.js - Advanced table plugin](https://gridjs.io/)**
>
> Grid.js is a lightweight, advanced table plugin that works everywhere

Thanks.

---

<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:** [6 June 2020 02:04 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/78 "2020-06-06T02:04:11Z")

</div>

Depends what you try to achieve. Quickly browsed through the examples

- no formatters
- no cell edits
- no filters
- no freezed columns
- no custom callbacks
- no drag/drop
- no copy/paste
- no column or row sorting / rearranging
- no reaktive layout
- no child tables / columns or rows
- ...

Certainly very lightweight in resources but at the same time in functionality. Very jung - not a bad thing but.,.

Both are pure JavaScript and framework independent. Think not difficult to do a warper for it but in my case not attractive

What is wrong with tabulator? Really curious to know.

---

<div class="post-metadata">

**Author:** ![happytm](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/happytm/32/7058_2.png) [@happytm](https://discourse.nodered.org/u/happytm)\
**Post date:** [6 June 2020 02:12 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/79 "2020-06-06T02:12:10Z")

</div>

Tabulator little too compicated for me. Although it works for me after following your example.

Thanks.

---

<div class="post-metadata">

**Author:** ![deme](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@deme](https://discourse.nodered.org/u/deme)\
**Post date:** [7 June 2020 19:35 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/80 "2020-06-07T19:35:45Z")

</div>

Has anyone of you used the [editable feature](http://tabulator.info/examples/4.4?#editable) or any idea how to implement this?

> Using the editable setting on each column, you can make a user editable table. Any time a cell is edited it triggers the cellEdited callback, to allow you to process any changes.

[Previous page](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256.md?page=3)

[Next page](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256.md?page=5)