Failure to create my first UI table

[dceejay]

Well I think the fix is/was in later level of tabulator - so as long as you are using new one it should be ok... finger crossed.

[BartButenaers]

@Christian-Me

The customHeight paramter was not intended to customized the row hight:

Oh no, now I see it. Indeed I have totally misinterpreted that parameter usage...
Seems here that I need to set the tabulator row height via css...

@Christian-Me

I pushed the upgrade to my Github (node-red-ui-nodes/node-red-node-ui-table at master · Christian-Me/node-red-ui-nodes · GitHub) perhaps you like to test it

Thanks again ...
Was not my intention to burry you under a pile of questions, but I had not thought in advance that I would have been stuck so often while creating a small table
But now it gets really embarrasing. Have tried a series of npm install commands, but cannot install your fork . Seems that the commands that I always use, only work when the package.json file is in the root of the Github repository...
If somebody can share an install command, that would be nice!

@Christian-Me

The column widths is not pixel perfect. I think it don’t take the (possible) vertical scrollbar into account. Try to play with the percentages or choose pixels with a little bit left over for the scrollbar.

I'm also still struggling to understand how to get my table columns to fill the available width in my dashboard

The tabulator documentation says this:

And my parent div fills nicely the available width, as offered by the dashboard:

And have two columns with a predefined width, and one column without width:

So I had expected that the third column would fill the available width, but instead the table becomes wider and I get a horizontal scrollbar (even before I inject row data):

I don't know what I have done wrong in my previous life to deserve this, but it must have been something very bad

[Christian-Me]

@BartButenaers

But now it gets really embarrasing. Have tried a series of npm install commands, but cannot install your fork . Seems that the commands that I always use, only work when the package.json file is in the root of the Github repository...

I don't know a easy way to install a package via npm form a GitHub repro subfolder. I would clone the repro and install it form the local directory.

To your width problem ... I always use the resizable columns ... as my ui-table handler record all the changes I adjust them by hand visually and if necessary prohibit resizing:

This adds up to 977px ... all collums have the exact spacing as recorded (and played back on connects).

So I have to dig deeper to investigate your problem ....

[Christian-Me]

Hi ... Sorry I didn't had enough time to dig deeper but please try to do a full deploy or even "restart flows" if you change parameters in the UI config ... The first thing I found out is that config seams not to get updated as expected in the frontend when you only deploy modified nodes.

[Christian-Me]

Hi,

I did a lot of extensive testing .. and on my side everything work as expected.
Some mechanics of msg.ui_control messages as they are currently implemented in ui-table

1. the config UI only defines the basic tabulator.columns array
2. msg.ui_control overwrites the columns indentified by the field property
3. subsequent changes in the UI don't effect the config in the frontend until flow restart when they where overwritten once by ui_control
4. msg.ui_control.tabluator.columns=[] stops overwriting the UI config by stored ui_control messages . A page reload is necessary to get back to the UI config (could and should be improved somehow in the future)
5. partial updates are possible as long the columns array contains the matching field property (see width inject)

This was done to enable serial modifications of the table layout starting from the config UI.

@dceejay The upgrade will take a while I already found a incompatibility: align is now hozAlign... and we don't want to break things

Here my simple test flow ...

[{"id":"a5af6227.a0126","type":"ui_table","z":"404c8482.ceaa2c","group":"ce5a47b6.8972d8","name":"","order":0,"width":0,"height":0,"columns":[{"field":"col1","title":"Column 1","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"col2","title":"Column 2","width":"20%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"col3","title":"Column 3","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":577,"y":408,"wires":[["d98d2869.3e9f58"]]},{"id":"55e9a602.229598","type":"inject","z":"404c8482.ceaa2c","name":"custom cols","props":[{"p":"ui_control","v":"{\"tabulator\":{\"layout\":\"fitColumns\",\"columns\":[{\"field\":\"col1\",\"title\":\"col1\",\"width\":\"25%\"},{\"field\":\"col2\",\"title\":\"col2\",\"width\":\"15%\"},{\"field\":\"col3\",\"title\":\"col3\"}]}}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":223,"y":357,"wires":[["9a6831b3.b05e8"]]},{"id":"9a6831b3.b05e8","type":"function","z":"404c8482.ceaa2c","name":"","func":"msg.payload = null;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":400,"y":408,"wires":[["a5af6227.a0126","17f90c7e.756c34"]]},{"id":"d98d2869.3e9f58","type":"debug","z":"404c8482.ceaa2c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":713,"y":408,"wires":[]},{"id":"17f90c7e.756c34","type":"debug","z":"404c8482.ceaa2c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":577,"y":459,"wires":[]},{"id":"fce7b91.dc5bd48","type":"inject","z":"404c8482.ceaa2c","name":"clear columns","props":[{"p":"ui_control","v":"{\"tabulator\":{\"columns\":[]}}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":223,"y":459,"wires":[["9a6831b3.b05e8"]]},{"id":"302c6c48.cd2454","type":"inject","z":"404c8482.ceaa2c","name":"width","props":[{"p":"ui_control","v":"{\"tabulator\":{\"layout\":\"fitColumns\",\"columns\":[{\"field\":\"col1\",\"width\":\"25%\"},{\"field\":\"col2\",\"width\":\"15%\"},{\"field\":\"col3\",\"width\":\"\"}]}}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":203,"y":408,"wires":[["9a6831b3.b05e8"]]},{"id":"ce5a47b6.8972d8","type":"ui_group","name":"Vanilla Table","tab":"bae8e16f.a9faa","order":1,"disp":true,"width":"9","collapse":false},{"id":"bae8e16f.a9faa","type":"ui_tab","name":"ui-table","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[BartButenaers]

Evening @Christian-Me,
Sorry for not responding earlier. But I got back to work and I already have to work this weekend. So unfortunately not much Node-RED time for me this week...
Will get back to you!
Thanks for investigating my questions!!!!!
Bart

[Christian-Me]

No problem .. I had to spend more time on my daytime job too ... And other projects piling up