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

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [10 September 2019 10:47 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/41 "2019-09-10T10:47:34Z")

</div>

node-red-dashboard v2.14.0  
I don't even know how you manage to have it styled like this, for me it shows unstyled...

---

<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:** [10 September 2019 10:59 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/42 "2019-09-10T10:59:11Z")

</div>

need dashboard 2.16.x  
(well it is styled - but just the light style)

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [10 September 2019 11:01 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/43 "2019-09-10T11:01:41Z")

</div>

Just updated. Restarted NR, now none of the tables show at all. Plus i've got new errors but app.js being minified I can't debug...

```auto
Uncaught SyntaxError: Unexpected token <
    at m (app.min.js:20)
    at Function.globalEval (app.min.js:20)
    at text script (app.min.js:20)
    at Ut (app.min.js:20)
    at k (app.min.js:20)
    at XMLHttpRequest.<anonymous> (app.min.js:20)
    at Object.send (app.min.js:20)
    at Function.ajax (app.min.js:20)
    at Function.w._evalUrl (app.min.js:20)
    at Re (app.min.js:20)

```

or this one

```auto
Uncaught ReferenceError: Tabulator is not defined
    at createTable (eval at <anonymous> (app.min.js:571), <anonymous>:20:41)
    at eval (eval at <anonymous> (app.min.js:571), <anonymous>:29:37)

```

or that one

```auto
Uncaught TypeError: Cannot set property 'onchange' of null
    at <anonymous>:2:56
    at m (app.min.js:20)
    at Re (app.min.js:20)
    at w.fn.init.append (app.min.js:20)
    at w.fn.init.<anonymous> (app.min.js:20)
    at z (app.min.js:20)
    at w.fn.init.html (app.min.js:20)
    at app.min.js:571
    at m.$digest (app.min.js:172)
    at m.$apply (app.min.js:176)

```

or that one

```auto
TypeError: Cannot read property '$attrs' of undefined
    at app.min.js:469
    at Array.map (<anonymous>)
    at Object.t.layoutDelegate (app.min.js:469)
    at Object.layout (app.min.js:469)
    at Object.callback (app.min.js:38)
    at app.min.js:469
    at Array.forEach (<anonymous>)
    at app.min.js:469
    at app.min.js:190
    at Tg.completeTask (app.min.js:187)

```

---

<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:** [10 September 2019 11:02 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/44 "2019-09-10T11:02:35Z")

</div>

probably need to - restart Node-RED server - refresh / flush cache at browser, etc

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [10 September 2019 11:04 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/45 "2019-09-10T11:04:31Z")

</div>

Thanks. Just did it. Still got some errors.

What is the 'tabulator' ?

```auto
app.min.js:20 GET 404 (Not Found)
https://mywebsite.mydomain.com/auto/ui/ui-table/js/tabulator.js 
https://mywebsite.mydomain.com/auto/ui/ui-table/css/tabulator_midnight.min.css

```

Just to clarify the above URL :  
`/auto` is httpRoot

The file definitely exists in  
`node_modules/node-red-node-ui-table/lib/js/tabulator.js`

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [10 September 2019 11:39 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/46 "2019-09-10T11:39:03Z")

</div>

I also have found a reference to this tabulator file in  
`./node_modules/node-red-node-ui-table/node.js`  
the source reads  
`<script type='text/javascript' src='ui-table/js/tabulator.js'></script>`

But what does the path ui-table gets mapped to ?

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [10 September 2019 14:10 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/47 "2019-09-10T14:10:05Z")

</div>

Well I replaced the paths to the tabulator.css and .js by CDN ones.  
The way it is done, using expressJS's Get on a wildcard didn't work for me at all.

---

<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:** [10 September 2019 16:01 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/48 "2019-09-10T16:01:09Z")

</div>

apologies - not keeping up with this. Is the ui-table node broken for you ?  
What path do you have dashboard set for (ui.path) ? and httpRoot ?  
(both in settings.js)

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [11 September 2019 10:41 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/49 "2019-09-11T10:41:45Z")

</div>

no need to apologise, you guys already doing an awesome work for our community of users !

httpRoot: /auto

the rest are commented

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [11 September 2019 10:43 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/50 "2019-09-11T10:43:38Z")

</div>

Actually I got the ui table working by downloading the tabulator.js and css , and making it available locally , then replacing the bottom of the node.js script in the ui-table widget to point to those paths.

The RED...get(something/\* at the bottom of node.js didn't work for me.

---

<div class="post-metadata">

**Author:** ![mcj](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mcj/32/12943_2.png) [@mcj](https://discourse.nodered.org/u/mcj)\
**Post date:** [2 October 2019 20:35 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/51 "2019-10-02T20:35:39Z")

</div>

Using the default node-red settings.js it works.

When I use httpNodeAuth/httpStaticAuth and change the user data directory on settings.js I get this:

Error: ENOENT: no such file or directory, stat '...myDir/node\_modules/node-red-node-ui-table/lib/js/tabulator.js unhautorized'

I checked and the file exists.

---

<div class="post-metadata">

**Author:** ![eoliverio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eoliverio/32/13850_2.png) [@eoliverio](https://discourse.nodered.org/u/eoliverio)\
**Post date:** [25 October 2019 08:27 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/52 "2019-10-25T08:27:05Z")

</div>

My columns are dynamic so I can't set it manually on the node.  
Is there a way to set the ALL column rows to 100% at once?

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [17 November 2019 02:13 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/53 "2019-11-17T02:13:58Z")

</div>

Any idea on that tabulator issue ?

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [12 December 2019 15:34 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/54 "2019-12-12T15:34:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [12 December 2019 16:22 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/55 "2019-12-12T16:22:28Z")

</div>

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

For reference here is my setup :

```auto
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;
                }
}

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [15 December 2019 11:57 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/56 "2019-12-15T11:57:52Z")

</div>

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)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f3f8bf1bcc4921e465e1faae394cb50050c86c77.png)  
or my Thermostats  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/fabc218cd7668830f8b6dcc7237d9ad008429ba0.png)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [15 December 2019 13:05 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/57 "2019-12-15T13:05:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [3 January 2020 10:43 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/58 "2020-01-03T10:43:29Z")

</div>

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

```auto
[{"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 😃**

..... example below

 ![Bildschirmfoto 2020-01-03 um 11.38.59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1b673c6a4566ada10b2e00e66fa6ba573a209ae6.jpeg)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 January 2020 11:05 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/59 "2020-01-03T11:05:32Z")

</div>

Perhaps this helps:

> **[Tabulator - Interactive JavaScript Tables](http://tabulator.info/docs/4.1/columns#vertical)**
>
> Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.

You can use msg.ui\_control to do that.

---

<div class="post-metadata">

**Author:** ![jodelkoenig](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jodelkoenig/32/44645_2.png) [@jodelkoenig](https://discourse.nodered.org/u/jodelkoenig)\
**Post date:** [3 January 2020 11:09 UTC](https://discourse.nodered.org/t/examples-for-node-red-node-ui-table/14256/60 "2020-01-03T11:09:34Z")

</div>

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 🙂 ) I found this to be a lean and transparent solution for me 😉

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

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