Examples for node-red-node-ui-table

Dashboard
21

@dceejay, how could I/you/someone handle the rowClick event and send a msg back to node-red?

Is there something the ui_template does to provide a means of calling send that this node doesn't provide to the client side?

A heads up would be appreciated.

1 Like
22

This is version 0.0.x - let's walk before we can run... plenty of wrinkles to sort out.
(Answer yes sure there is a way but right now it's an output only node, while Yokoi-san is on vacation I'm only the caretaker.)

23

Before node-red-ui-node-table, I would construct a html table and pass it to ui_template to send an event. Wonder if the node-red-ui-node-table HTML formatting would allow the this technique to work.

   msg.template = msg.template + "<tr><td><i ng-click=\"send({payload:'"+ thisrow.data +"'})\" class=\"fa fa-info-circle\" style=\"font-size:16px;color:red\"></i></td></tr>";
24

Sure no problem. If you get a minute though, to point me in the right direction, I am still interested in how the mechanism is implemented. Ta.

25

I like the looks of the screen shots, but I get blank tables, or should I say a blank group. This is from simple table example. Same results from the richer table as well. Same for light or dark theme.

image file:///home/prw/Downloads/Table.png

Ubuntu 18.04,
Node v10.16.2
Node-RED v0.20.7
Dashboard v2.16.0
Firefox 68.0.2, & in Chrome v76.0.3809.100

Since it seems to be working for everyone else ... :alien: ?

26

Share the flow.
And what is version of node-red-ui-node-table you are using

27

Node-RED, Dashboard were refreshed an hour ago, node-red-ui-node-table ( 0.0.7) was then installed, everything should be today's version ... or an hour ago. :slight_smile:

[
    {
        "id": "f25934fc.851378",
        "type": "inject",
        "z": "b8ea1781.239f1",
        "name": "",
        "topic": "",
        "payload": "[{\"Name\":\"Kazuhito Yokoi\",\"Age\":\"35\",\"Favourite Color\":\"red\",\"Date Of Birth\":\"12/09/1983\"},{\"Name\":\"Oli Bob\",\"Age\":\"12\",\"Favourite Color\":\"red\",\"Date Of Birth\":\"12/08/2017\"}]",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 190,
        "y": 180,
        "wires": [
            [
                "18678d42.4f555b"
            ]
        ]
    },
    {
        "id": "18678d42.4f555b",
        "type": "ui_table",
        "z": "b8ea1781.239f1",
        "group": "b3b24836.3352e",
        "name": "",
        "width": 0,
        "height": 4,
        "columns": [],
        "x": 390,
        "y": 180,
        "wires": []
    },
    {
        "id": "9b08ad4d.ca1038",
        "type": "comment",
        "z": "b8ea1781.239f1",
        "name": "Normal table",
        "info": "",
        "x": 190,
        "y": 140,
        "wires": []
    },
    {
        "id": "e26e08ac.86471",
        "type": "inject",
        "z": "b8ea1781.239f1",
        "name": "",
        "topic": "",
        "payload": "[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 190,
        "y": 220,
        "wires": [
            [
                "17a97628.08ac22"
            ]
        ]
    },
    {
        "id": "4d1c2f0c.bbc4e8",
        "type": "inject",
        "z": "b8ea1781.239f1",
        "name": "",
        "topic": "",
        "payload": "[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":20,\"Star\":\"1\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"80\",\"Star\":4,\"Pass\":true,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"red\",\"Prog\":90,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 190,
        "y": 260,
        "wires": [
            [
                "17a97628.08ac22"
            ]
        ]
    },
    {
        "id": "17a97628.08ac22",
        "type": "ui_table",
        "z": "b8ea1781.239f1",
        "group": "a4f540ce.615ef8",
        "name": "People",
        "order": 1,
        "width": "8",
        "height": "3",
        "columns": [
            {
                "field": "Name",
                "title": "Who",
                "width": "",
                "align": "left",
                "formatter": "html",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Age",
                "title": "Age",
                "width": "40",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Color",
                "title": "",
                "width": "5%",
                "align": "left",
                "formatter": "color",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Star",
                "title": "%",
                "width": "100",
                "align": "left",
                "formatter": "star",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Pass",
                "title": "",
                "width": "5%",
                "align": "center",
                "formatter": "tickCross",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "Prog",
                "title": "",
                "width": "80",
                "align": "left",
                "formatter": "progress",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "web",
                "title": "URL",
                "width": "",
                "align": "left",
                "formatter": "link",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "x": 400,
        "y": 220,
        "wires": []
    },
    {
        "id": "b3b24836.3352e",
        "type": "ui_group",
        "z": "",
        "name": "Default",
        "tab": "bc04eabe.80991",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "a4f540ce.615ef8",
        "type": "ui_group",
        "z": "",
        "name": "Richer Table",
        "tab": "f0c59cb8.e22248",
        "order": 1,
        "disp": true,
        "width": "8",
        "collapse": false
    },
    {
        "id": "bc04eabe.80991",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "f0c59cb8.e22248",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "track_changes",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]
28

ooops. mea-culpa - not enough bounds checking.
0.0.8 now there should fix it.

29

Still got nothing :frowning:
I update the node to 0.0.8, stopped and restart node-red, deleted the examples and cleaned up the UI tabs/groups, deployed empty tab, imported the simple example, deployed it, clicked on inject ... same result as before.

There is nothing coming up in debug pane or in the console. I'm in debug mode in setting.js.

I'm getting ready to go out for the evening but I will be around tomorrow if you want any additional information such as configuration or tracing.

Happy to help in any way I can.

30

This morning I opened my browser console and tried to load it again. There is an error there:

image
image.png900×608 92.1 KB

Not sure if it helps.

So new users are limited to 3 replies in a single thread ....

It's running on localhost, default ports.

I get the same error in Chrome as well.

I have tried with disabling all of my extensions as well.

In the debugger in Chrome for the table element I see:

md-card ui-template="me.item.format" ui-card-size="0x4" class="nr-dashboard-template ng-scope _md visible" ng-class="{'nr-dashboard-disabled':me.item.disabled}" style="left: 0px; top: 0px; width: 318px; height: 210px;">
                <link href="table/css/tabulator_midnight.min.css" rel="stylesheet" class="ng-scope">
                <script type="text/javascript" src="table/js/tabulator.js" class="ng-scope"></script>
                <div id="ui_table-23" class="ng-scope"></div>
                <input type="hidden" ng-init="init({&quot;id&quot;:&quot;474a5b71.fe8dec&quot;,&quot;type&quot;:&quot;ui_table&quot;,&quot;z&quot;:&quot;b8ea1781.239f1&quot;,&quot;group&quot;:&quot;8fac2f91.7f3858&quot;,&quot;name&quot;:&quot;&quot;,&quot;width&quot;:0,&quot;height&quot;:4,&quot;columns&quot;:[],&quot;x&quot;:390,&quot;y&quot;:120,&quot;wires&quot;:[]})" autocomplete="off" class="ng-scope">
            </md-card>

@dceejay UPDATE: for 0.0.9 - no change. below is the console output from Chrome:

Document was loaded from Application Cache with manifest http://localhost:1880/ui/dashboard.appcache
:1880/ui/#!/0:1 Application Cache Checking event
:1880/ui/#!/0:1 Application Cache NoUpdate event
app.min.js:532 Rendered http://localhost:1880/ui/css/app.min.less successfully.
app.min.js:532 CSS for http://localhost:1880/ui/css/app.min.less generated in 101ms
app.min.js:532 Less has finished. CSS generated in 101ms
app.min.js:148 You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material!
(anonymous) @ app.min.js:148
app.min.js:532 Rendered http://localhost:1880/ui/css/app.min.less successfully.
app.min.js:532 CSS for http://localhost:1880/ui/css/app.min.less generated in 52ms
app.min.js:532 Less has finished. CSS generated in 52ms
app.min.js:20 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ app.min.js:20
app.min.js:20 Failed to load resource: the server responded with a status of 404 (Not Found)
send @ app.min.js:20
:1880/ui/#!/0:1 Refused to apply style from 'http://localhost:1880/ui/table/css/tabulator_midnight.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
VM71:6 Uncaught ReferenceError: Tabulator is not defined
    at createTable (eval at <anonymous> (app.min.js:600), <anonymous>:6:41)
    at eval (eval at <anonymous> (app.min.js:600), <anonymous>:21:37)
:1880/ui/#!/0:1 Refused to apply style from 'http://localhost:1880/ui/table/css/tabulator_midnight.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

and for FireFox:

You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material! app.min.js:148:303
Rendered http://localhost:1880/ui/css/app.min.less successfully. app.min.js:532:12831
CSS for http://localhost:1880/ui/css/app.min.less generated in 223ms app.min.js:532:12831
Less has finished. CSS generated in 223ms app.min.js:532:12831
SideNav 'left' is not available! Did you use md-component-id='left'? app.min.js:148:303
SideNav 'left' is not available! Did you use md-component-id='left'? app.min.js:148:303
Rendered http://localhost:1880/ui/css/app.min.less successfully. app.min.js:532:12831
CSS for http://localhost:1880/ui/css/app.min.less generated in 84ms app.min.js:532:12831
Less has finished. CSS generated in 84ms app.min.js:532:12831
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ app.min.js:20:80629
The resource from “http://localhost:1880/ui/table/css/tabulator_midnight.min.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
ui
ReferenceError: Tabulator is not defined
app.min.js line 600 > eval:6:41
Source map error: request failed with status 404
Resource URL: http://localhost:1880/ui/js/app.min.js
Source Map URL: angular-chart.min.js.map​

@dceejay on a different system now at work, tried v0.1.0 there and it's doing the same thing.
New system info is:
RHEL v7.4
Node v12.4.0
Node-RED v20.6
Dashboard v2.16.0
Browser on Windows 7 - Firefox v68.0esr

31

hmm - yes - explains why it doesn't work.... - but not sure why you are getting that.

32

May be the type="text/css" in link tag can fix this but not sure.

33

No problem in displaying the answer from a SQL request.

However, if the table is sized for 4 rows and the SQL answer contains 10 rows, how to go down to display the 5th row, 6th, and so on?

Thank you!

34

@RayMN - Hi -have pushed version 0.0.9 with the suggestion from @hotNipi - fingers crossed.

1 Like
35

@Steve-Mcl et al - version 0.1.0 now with optional output.

1 Like
36

I like this table widget, but I am wondering if it can be scrolled vertically if there are more rows than there is vertical space in the group?

37

Yes it should scroll vertically if it needs to

PS everyone. Please note I have renamed this node to follow our own naming conventions :-). It is now node-red-node-ui-table

38

Am I the only one to have the problem that the ui-tables incorporate a specific theme (via .tabulator css class) that goes over the current dashboard theme (and this is quite annoying) ? see lists below

image
image.png1691×473 20.5 KB

image
image.png1131×525 10.7 KB

39

Another problem that seems to happen is if there are 2 tables on the same screen, any changes to one gets applied to the other... even if the node name is different. I have checked html and both table's div IDs are different. So why would that happen ?

40

can you share an example ? which version of dashboard are you using ?

image
image.png1006×768 43 KB