Examples for node-red-node-ui-table

Dashboard
1

@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

I would love to see more table example screenshots posted to

Thanks!

1 Like
2

John, PRs always welcome !

3

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

4

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

5

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

uiTableScreenshot
uiTableScreenshot.JPG1265Ă—243 18.9 KB

How to change the colors, etc.??

6

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

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.

2 Likes
7

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

1 Like
8

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

7 Likes
9

Waiting for it to show up. Still says 001

10

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

cd ~/.node-red
npm i node-red-ui-node-table
11

So here is another Simple Example, just playing around this it:
Table%20Test

Code:

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;
4 Likes
12

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)

13

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

ScreenShot063

ScreenShot064

I've raised the issue on Github.

1 Like
14

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

15

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.

[{"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}]
16

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

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.

17

OK - try v 1.0.5

(loading is another issue - non-fatal.

1 Like
18

v0.0.5 :wink: 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

19

PR always welcome :slight_smile:

20

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.