Examples for node-red-node-ui-table

johnwalicki · 12 August 2019 17:52

@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!

dceejay · 12 August 2019 18:49

John, PRs always welcome !

tcontrada · 12 August 2019 18:56

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

johnwalicki · 12 August 2019 18:59

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

tcontrada · 12 August 2019 20:30

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

How to change the colors, etc.??

dynamicdave · 13 August 2019 06:02

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.

Bobo · 13 August 2019 06:55

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

dceejay · 13 August 2019 12:12

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

tcontrada · 13 August 2019 13:42

Waiting for it to show up. Still says 001

dceejay · 13 August 2019 15:37

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

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

tcontrada · 14 August 2019 17:22

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;

Steve-Mcl · 14 August 2019 17:49

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)

dynamicdave · 14 August 2019 18:23

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.

dceejay · 14 August 2019 18:54

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

hotNipi · 14 August 2019 19:55

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}]

hotNipi · 15 August 2019 12:26

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.

dceejay · 15 August 2019 14:43

OK - try v 1.0.5

(loading is another issue - non-fatal.

hotNipi · 15 August 2019 15:12

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

dceejay · 15 August 2019 15:37

PR always welcome

dynamicdave · 15 August 2019 16:11

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.

Topic		Replies	Views
UI Table with JSON UI Control Dashboard	4	521	21 February 2021
Node-red-node-ui-table node, cell formatting Dashboard node-red-dashboard	5	217	10 February 2024
How to make run_time ui_table Dashboard	3	457	15 December 2020
Ui-table node example General	4	917	27 February 2020
Node-red-node-ui-table - Change background color of a cell depending on its value Dashboard node-red-dashboard	1	218	1 October 2023

Examples for node-red-node-ui-table

Related topics