# 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:** 1

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [12 August 2019 17:52 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/1 "2019-08-12T17:52:43Z")

</div>

@kazuhitoyokoi / @dceejay - I just stumbled across your new node-red-ui-node-table table node. Very nice! I have tons of Node-RED dashboards where I hand build html tables inside function nodes and render them in an ui\_template node. This is going to be a fantastic simplification. I've started to experiment with the new Table node.

[https://flows.nodered.org/node/node-red-ui-node-table](https://flows.nodered.org/node/node-red-ui-node-table)

I would love to see more table example screenshots posted to

> **[node-red/node-red-ui-nodes](https://github.com/node-red/node-red-ui-nodes/tree/master/node-red-ui-node-table)**
>
> Additional nodes for Node-RED Dashboard. Contribute to node-red/node-red-ui-nodes development by creating an account on GitHub.

Thanks!

---

<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:** [12 August 2019 18:49 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/2 "2019-08-12T18:49:34Z")

</div>

John, PRs always welcome !

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [12 August 2019 18:56 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/3 "2019-08-12T18:56:20Z")

</div>

I didn't see the screenshot on the github page?

---

<div class="post-metadata">

**Author:** ![johnwalicki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/johnwalicki/32/8848_2.png) [@johnwalicki](https://discourse.nodered.org/u/johnwalicki)\
**Post date:** [12 August 2019 18:59 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/4 "2019-08-12T18:59:59Z")

</div>

Certainly will do! I don't yet know what all the column formats look like. I just wanted to see some table screenshots instead of building full examples for myself.

Date time / Link / Image / HTML / Progress / Traffic / Color / Tick cross / Star / Row number

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [12 August 2019 20:30 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/5 "2019-08-12T20:30:12Z")

</div>

I just tried with your sample data. Here is a screenshot.

 ![uiTableScreenshot](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d62a11e589967350ec3f4aef72a499fc9b5782f4.jpeg)

How to change the colors, etc.??

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [13 August 2019 06:02 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/6 "2019-08-13T06:02:58Z")

</div>

I've tried a few of the options.

Double-click the ui-node-table widget and use the Format option.  
For example, if you change the format for the third column (of your screen-shot) to 'color' it will turn these cells 'red' (if you have the text "red" in the object).

![ScreenShot061](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/13a3c3c0ba248c8a9eafdd3f0628ec9463099acc.png)

Tick and cross seem to react to "0" and "1" or 0 and 1.  
I've also got 'Link' to work with.. http://some\_web\_address

'Row number' does just that - puts a number in the cell to indicate the row of the table.

I'm sure the author will create some example-text before too long.

---

<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:** [13 August 2019 06:55 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/7 "2019-08-13T06:55:31Z")

</div>

> [@dynamicdave](#):
>
> I've tried a few of the options.

The options aren't obvious, at least they weren't for me. And nothing in the nodes description. Thanks for pointing it out.

---

<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:** [13 August 2019 12:12 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/8 "2019-08-13T12:12:25Z")

</div>

I have pushed version 0.0.2 - with a richer example , more prompts and more docs in the Info and Readme.

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [13 August 2019 13:42 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/9 "2019-08-13T13:42:06Z")

</div>

Waiting for it to show up. Still says 001

---

<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:** [13 August 2019 15:37 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/10 "2019-08-13T15:37:59Z")

</div>

Good old npm - failing to index again...  
command line works

```auto
cd ~/.node-red
npm i node-red-ui-node-table

```

---

<div class="post-metadata">

**Author:** ![tcontrada](https://avatars.discourse-cdn.com/v4/letter/t/f1d935/32.png) [@tcontrada](https://discourse.nodered.org/u/tcontrada)\
**Post date:** [14 August 2019 17:22 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/11 "2019-08-14T17:22:01Z")

</div>

So here is another Simple Example, just playing around this it:  
 ![Table%20Test](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e3e904fed3aef11108c77c447ef01aff8916c6eb.jpeg)

Code:

```auto
var d = [
    {
        "Name": "Kazuhito Yokoi",
        "Age": "<div style='background-color: yellow; width:100%'>35</div>",
        "Favourite Color": "<font color='blue'><b>Blue</b></font>",
        "Date Of Birth": "12/09/1983"
    },
    {
        "Name": "Oli Bob",
        "Age": "12",
        "Favourite Color": "<font color='red'><b>Red</b></font>",
        "Date Of Birth": "12/08/2017"
    }
]
msg.payload = d;
return msg;

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 August 2019 17:49 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/12 "2019-08-14T17:49:03Z")

</div>

I had a play with this today. Liking it. Looking forward to how this progresses. I even tried a quick mod to get row click event to fire a msg in node red, sending in the row data. But unlike the ui\_template node, `send()` was not available at client side (guessing there is some under the hood magic setup by ui\_template)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [14 August 2019 18:23 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/13 "2019-08-14T18:23:37Z")

</div>

I couldn't get the 'progress bar' to work with Firefox Nightly 70.0a1 (2019-08-13) (64-bit) (on a Win-7 PC) unless I moved the width of the column left or right slightly with the mouse.  
It works fine in Chrome but not FF.

![ScreenShot062](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/05652795e85285a7befa1fe35bbefe2948a8c0a6.png)

![ScreenShot063](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/56e1453f255025c7de8a7d7dc25d52f9ab78005f.png)

![ScreenShot064](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d61ff9f85d3ce4dd7acfe8708698d499162f85a8.png)

I've raised the issue on Github.

---

<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:** [14 August 2019 18:54 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/14 "2019-08-14T18:54:21Z")

</div>

Anyone else see this ? (As usual it’s working for me ...)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 August 2019 19:55 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/15 "2019-08-14T19:55:47Z")

</div>

Can confirm with FF 66.0.2 (64-bit) Win10  
Progress bar sometimes shown on dev tools opening and disappeared on dev tools close.

Table in use with not default tab. On tab switch progress is not drawn. If selecting menu to switch tab back to main, the progress is drawn.

```auto
[{"id":"70466254.88d96c","type":"ui_gauge","z":"cefda5c5.afe5c8","name":"","group":"ebfd8f03.fe566","order":1,"width":"0","height":"0","gtype":"gage","title":"Melt Temperature","label":"°F","format":"{{value|number:2}}","min":0,"max":"1000","colors":["#00b500","#e6e600","#ca3838"],"seg1":"700","seg2":"900","x":610,"y":400,"wires":[]},{"id":"52ff4ae1.a7cac4","type":"inject","z":"cefda5c5.afe5c8","name":"","topic":"","payload":"","payloadType":"str","repeat":"5","crontab":"","once":false,"onceDelay":"","x":180,"y":400,"wires":[["1f6bed5c.fafa93"]]},{"id":"1f6bed5c.fafa93","type":"random","z":"cefda5c5.afe5c8","name":"random between 1 - 500","low":"1","high":"500","inte":"false","property":"payload","x":370,"y":400,"wires":[["70466254.88d96c"]]},{"id":"2331d03.aefdf3","type":"ui_table","z":"cefda5c5.afe5c8","group":"bbab2560.6f8948","name":"","order":1,"width":"10","height":"2","columns":[{"field":"n","title":"NAME","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"a","title":"PROGRESS","width":"","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}}],"x":620,"y":470,"wires":[]},{"id":"e4b715ef.240f58","type":"function","z":"cefda5c5.afe5c8","name":"","func":"var d = [\n {\n \"n\":\"A\",\n \"a\": Math.random()*100\n },\n {\n \"n\":\"B\",\n \"a\": Math.random()*100\n }\n]\nmsg.payload = d;\nreturn msg;","outputs":1,"noerr":0,"x":490,"y":470,"wires":[["2331d03.aefdf3"]]},{"id":"981f80a6.5146c","type":"ui_ui_control","z":"cefda5c5.afe5c8","name":"","x":170,"y":470,"wires":[["7b42edfe.9f6d84"]]},{"id":"7b42edfe.9f6d84","type":"trigger","z":"cefda5c5.afe5c8","op1":"","op2":"0","op1type":"nul","op2type":"str","duration":"250","extend":false,"units":"ms","reset":"","bytopic":"all","name":"","x":340,"y":470,"wires":[["e4b715ef.240f58"]]},{"id":"ebfd8f03.fe566","type":"ui_group","z":"","name":"G2","tab":"d2d7da91.07a668","disp":true,"width":"6","collapse":false},{"id":"bbab2560.6f8948","type":"ui_group","z":"","name":"G1","tab":"13731dc0.622ff2","disp":true,"width":"10","collapse":false},{"id":"d2d7da91.07a668","type":"ui_tab","z":"","name":"AWAY","icon":"dashboard","disabled":false,"hidden":false},{"id":"13731dc0.622ff2","type":"ui_tab","z":"","name":"HOME","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 August 2019 12:26 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/16 "2019-08-15T12:26:47Z")

</div>

I didn't notice this before but there is error in browser console. It is for Chrome as well as for Firefox

```auto
VM1520:7452 Tabulator Creation Error - no element found matching selector: #ui_table-27
Tabulator.initializeElement @ VM1520:7452
app.min.js:148 TypeError: Cannot read property 'slice' of undefined
    at Tabulator._clearObjectPointers (<anonymous>:7533:42)
    at Tabulator._create (<anonymous>:7496:8)
    at new Tabulator (<anonymous>:6920:8)
    at eval (eval at <anonymous> (app.min.js:600), <anonymous>:11:41)
    at m.$digest (app.min.js:172)
    at m.$apply (app.min.js:176)
    at app.min.js:597
    at r.<anonymous> (app.min.js:598)
    at r.emit (index.js:83)
    at r.onevent (index.js:83)

```

Probably the div is not found in DOM at the time it first accessed for Tabulator creation.

---

<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:** [15 August 2019 14:43 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/17 "2019-08-15T14:43:58Z")

</div>

OK - try v 1.0.5

(loading is another issue - non-fatal.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 August 2019 15:12 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/18 "2019-08-15T15:12:54Z")

</div>

v0.0.5 😉 Progress bars now rendered in Firefox.  
There is sizing issue for columns, most probably related to loading issue mentioned above.  
Just as described in first topic in FAQ at [http://tabulator.info/faq](http://tabulator.info/faq)

---

<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:** [15 August 2019 15:37 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/19 "2019-08-15T15:37:29Z")

</div>

PR always welcome 🙂

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [15 August 2019 16:11 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/20 "2019-08-15T16:11:31Z")

</div>

Thanks Dave @dceejay - your last update sorted out the 'progress bars' not showing in FF for me.

Thanks for all your hard work.

Regards, David.

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