Examples for node-red-node-ui-table

Any idea on that tabulator issue ?

I'm still having the problem
Cannot GET /auto/ui/ui-table/css/tabulator_midnight.min.css
it is supposed to be publishing the content of
node_modules/node-red-node-ui-table/lib/css
but it doesn't.
Again my settings are
httpRoot: /auto
the rest are commented (hence dashboard published on /auto/ui by default)

Nginx runs on the host and proxies requests for /auto to the docker container running node-red...

I had to copy the lib folder under /var/www and create a special location entry in nginx.

For reference here is my setup :

location /auto/ {
                proxy_pass http://localhost:1880; # points to the local docker container
                proxy_set_header X-Real-IP $remote_addr;

                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";

                location /auto/ui/ui-table/ {
                        alias  /var/www/html/libs/node-red-node-ui-table/; # manually copied from node_modules/....
                        autoindex on;
                        autoindex_exact_size off;
                        autoindex_format html;
                        autoindex_localtime on;
                }
}

Sorry but I could not help you with this issue. I installed ui-table for the palette and later from a github fork to perform a PR and in both cases it works without any flaws. I have to point out that I use two very standard installations on Windows 10. One for development running from the command line (mostly form within VS Code) and the other on my server running as a service.
I also had problems with references to static contend when I wrote a custom node (simply loading an image into the help panel) but I quickly gave up and liked it to my github. So no experience how to use and configure the node-js / Node-RED web server. In particular no docker an nginx experience.

Sorry, because I think the ui-table is a powerful widget to display a lot of data on a small area.

Just to make you envious or to encourage you to keep debugging:
my syslog server (work in progress)


or my Thermostats

1 Like

perhaps one thing ...

the css is linked to the path ui-table/css if you make an alias to ui-table the server perhaps link to /ui-table/ui-table/css and fails?

but in the filesystem it is stored under \node-red-node-ui-table\lib\css (as you see i have no clue)
So somewere the ui-table is replaced into lib. This most likely happens in the dashboard itself and alias definition are very likely to be problematic in this case.

Just a thought or two.

1 Like

CSS did the trick for me. I am now able to customize most important aspects of the table in order to make it a fit to my overall dashboard theme.

For reference if anybody wants to do something similar (just assign ui-template node to your ui-table's group):

[{"id":"eca62c1a.40bdf8","type":"ui_template","z":"113a5c80.015354","group":"c4aa95f6.0a88","name":"CSS: ui-table","order":1,"width":0,"height":0,"format":"<style>\n\n  .tabulator{padding-left:2px;border:1px solid #000;background-color:#202529;font-size:17px}\n  \n  .tabulator .tabulator-header{border-bottom:0px solid #000;background-color:#202529}\n  .tabulator-col-content{background-color:#202529;height:37px}\n\n  .tabulator-row{min-height:31px;background-color:#181c1f}\n  .tabulator-row:nth-child(2n){background-color:#202529}\n\n  .tabulator-row .tabulator-cell{border-right:0px solid #888}\n  .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1290,"y":2970,"wires":[[]]},{"id":"c4aa95f6.0a88","type":"ui_group","z":"","name":"Default","tab":"b06ddd9b.614eb8","order":1,"disp":false,"width":"24","collapse":false},{"id":"b06ddd9b.614eb8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

Note:

  • This one includes only those parameter I wanted to change. A lot more can be found in ./node_modules/node-red-node-ui-table/lib/css/tabulator??????...?????.css
  • With .tabulator-row{min-height:31px} and .tabulator-col-content{height:37px} one can easily align the overall table-size to the corresponding group size
  • I yet have to find out how to vertically align text in both, header and table cells ... any hint is highly appreciated :smiley:

..... example below

4 Likes

Perhaps this helps:

You can use msg.ui_control to do that.

2 Likes

Thanks again, Christian. I looked at it already. However, following your advise concerning CSS and after I got an idea about how CSS works (sort of :slight_smile: ) I found this to be a lean and transparent solution for me :wink:

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.

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

I am there, finally :slight_smile:

  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 :slight_smile:
  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 :wink:) in the title field of ui-table node

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

[{"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:

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 :smiley:

7 Likes

That's a good looking table ! well done.

1 Like

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

This is done by a callback function.

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

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?

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.

1 Like

thx, and I also checked this :wink:

image

2 Likes

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

Thanks

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 :wink: Ui-table supports ui_control

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

    "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 ---

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

1 Like