Ui-table: options how - example no header

[hklages]

I would like to format a table created with node-red-node-ui-table but struggle with the ui_control "Tabulator" property.
How to use that?

In the following example I try to hide the header but it does not work.
What's wrong with the flow?

I get the error message TypeError: Cannot read property 'length' of undefined in MS Edge console window.

[{"id":"fe9a0b2e.d3c5e8","type":"inject","z":"62cdb70e.b8cc78","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"name1\",\"room\":\"room1\"},{\"name\":\"name2\",\"room\":\"room2\"}]","payloadType":"json","x":510,"y":680,"wires":[["94b707aa.32cb28"]]},{"id":"beceed99.eb71","type":"ui_table","z":"62cdb70e.b8cc78","group":"8f877964.f449b8","name":"table without header","order":2,"width":"6","height":"4","columns":[{"field":"name","title":"xxxxx","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"room","title":"yyyy","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":865,"y":680,"wires":[]},{"id":"94b707aa.32cb28","type":"change","z":"62cdb70e.b8cc78","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"headerVisible\":false}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":680,"wires":[["beceed99.eb71"]]},{"id":"8f877964.f449b8","type":"ui_group","name":"Group 2","tab":"b0e31533.2b0128","order":2,"disp":true,"width":6},{"id":"b0e31533.2b0128","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

[dceejay]

we just pushed a fix that hopefully will also fix this - now available as v0.3.2

[hklages]

0.3.2: Thanks! Now, there is no error message and the table is shown.

But still the "ui_control" with "headerVisible":false is ignored. So the table header is visible.

[dceejay]

hmm

[{"id":"e640490f.483c18","type":"inject","z":"846d7832.3348c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"name1\",\"room\":\"room1\"},{\"name\":\"name2\",\"room\":\"room2\"}]","payloadType":"json","x":130,"y":740,"wires":[["ec0dea01.1e7a28"]]},{"id":"ec0dea01.1e7a28","type":"change","z":"846d7832.3348c8","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"headerVisible\":false,\"movableColumns\":false}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":740,"wires":[["ac89146.f80f2e8"]]},{"id":"ac89146.f80f2e8","type":"ui_table","z":"846d7832.3348c8","group":"2e5ea0b8.29145","name":"table without header","order":2,"width":"6","height":"4","columns":[{"field":"name","title":"xxxxx","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"room","title":"yyyy","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":485,"y":740,"wires":[]},{"id":"2e5ea0b8.29145","type":"ui_group","name":"Group 2","tab":"4f89e777.1f6208","order":2,"disp":true,"width":6},{"id":"4f89e777.1f6208","type":"ui_tab","z":"","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

gives me

[hklages]

S.t.r.a.n.g.e: In dark mode it often works, in light mode not really. But I use light mode

I did some tests:

A) Light theme
I cleaned up the system (removed all imported nodes, deleted the group, tab and cleared browser cache, restarted browser) then:

1. Imported your flow with header visible false
2. deploy + inject
3. start dashboard
   Result: ui_control does not work.

B. Dark theme
I switched to dark theme and cleaned the system again. Then same procedure as before

1. Imported your flow
2. deploy + inject
3. start dashboard
   Result: ui_control works.

C. Switch from dark to light theme
I the switched from dark theme (header is hidden) to light theme -> deploy -> inject.
Result is a combination of A) and B)

The header is hidden but it is not light theme.

Any idea how to get it work in light theme with light theme?

[dceejay]

well - that makes absolutely no sense what so ever....
Happy Friday !

[Andrei]

Apparently the ui_table uses different css files for each theme:

tabulator_midnight.min.css versus tabulator.min.css

Dark:

Light:

comparing the minified CSS files I see that the midnight theme has this class:

.tabulator .tabulator-header.tabulator-header-hidden {

    display: none

  }

The light one doesn´t.

[Christian-Me]

Great you found the problem! Thank you. There was the same issue before:

Callback as json argument

I took the ui-table example and modified it with "headerVisible": false [image] and I get this: [sWFidy3Lc0] I added your change node with mine (set to true) and I can switch the header on/off with the inject nodes And I updated to the latest version of the dashboard and ui-table (Node-RED 1.0.3) just to be shure. [{"id":"47813b5f.afda84","type":"inject","z":"ab797823.3396a8","name":"","topic":"","payload":"[{\"name\":\"MEQ0451495\",\"room\":\"Bathroom\",\"SET_TEMPERATURE-value\":22,\"AC…

But I used the dark theme so everything worked as expected.

Where the css expert how can help here? Or should we upgrade tabulator.js? There are some interesting new features (like persistent layouts) and may different designs.

or I try a simple copy paste? But these are all for version 4.7 and I thing ui-table uses 4.2

[dceejay]

as long as it doesn't break existing then by all means update it.

[Christian-Me]

Who knows ... a lot of testing will be required. Perhaps "we" can fix the tabulator.min.css first as a hotfix and then try an upgrade to 4.7

[dceejay]

well point release "shouldn't break things" but....
and yes - patching is fine

[Christian-Me]

should work now ... and by the way I found a small but annoying bug (only appears if you configure the columns by ui_controll (and not via the UI)

[hklages]

yes - it does.

Thanks!