node-red-node-ui-table column width incorrect at random

[Michael-Hennemann]

Which node are you reporting an issue on?

table node from node-red-node-ui-table

What are the steps to reproduce?

Not sure how exactly to reproduce. I am using several simple tables with 2 columns. First Align left, 75%, second align right 25%
All are configured with the same settings

What happens?

The column width is displayed incorrectly at random. I have seen this with two separate NR instances, in Firefox, MS Edge and on iPhone and Android (Firefox). Sometimes they are displayed correctly, most of the time at least one or two are displayed incorrectly

What do you expect to happen?

Tables should have the size configured in node config

Please tell us about your environment:

• Node-RED version: 1.2.9, node-red-node-ui-table version 0.3.12
• node.js version:
• npm version:
• Platform/OS: Redmatic on Raspberrymatic
• Browser: Firefox, MS Edge, Safari on iOS, Firefox on Android

[Steve-Mcl]

Hi.

Can you please share a minimal flow (use with nodes for data) that demonstrates this problem.

Thanks

[Michael-Hennemann]

Sure :) I hope this is what you have in mind, otherwise please tell me what else I can provide :)

[{"id":"c8fc394c.28e928","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"HmIP-RF","channel":"000C98A991E00A:1 Wohnzimmer Fußbodenheizung:1","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":240,"y":880,"wires":[["f0914a68.863de8"]]},{"id":"7336d124.6bd938","type":"function","z":"8ec70f6f.4a3ab8","name":"TempIst_Sammler","func":"// HEIZUNG\n\nvar inputdevice = {};\ninputdevice.name = msg.DeviceName\ninputdevice.state = msg.DeviceState\n\n\nvar workarray = global.get('tempist');\n\n\nif(workarray.find(e => (e.name === (inputdevice.name))))\n\n{\n\n for (var i=0; i < workarray.length; i++) \n\n {\n \n if (workarray[i].name === inputdevice.name) \n \n {\n workarray[i].state = inputdevice.state;\n \n } \n \n }\n\n}else{\n\n\n workarray.push({name:inputdevice.name,state:inputdevice.state})\n \n}\n\nglobal.set('tempist', workarray);\n\nmsg = {};\nmsg.payload = workarray\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":870,"y":640,"wires":[["f593bf66.26e4c"]]},{"id":"f593bf66.26e4c","type":"ui_table","z":"8ec70f6f.4a3ab8","group":"f5646a3.725ad18","name":"Temperatur Ist","order":0,"width":"7","height":"4","columns":[{"field":"name","title":"Raum","width":"75%","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"state","title":"Ist","width":"25%","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":1160,"y":640,"wires":[]},{"id":"f0914a68.863de8","type":"function","z":"8ec70f6f.4a3ab8","name":"TempIst","func":"\nmsg.DeviceName = msg.room\nmsg.DeviceState = ((msg.payload) + \"°C\")\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":620,"y":640,"wires":[["7336d124.6bd938"]]},{"id":"5ec46647.2d0f1","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0236609:1 Büro Wandthermostat:1","datapoint":"TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":210,"y":520,"wires":[["f0914a68.863de8"]]},{"id":"e623f805.f668d8","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"LEQ1461930:1 Küche Wandthermostat:1","datapoint":"TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":210,"y":580,"wires":[["f0914a68.863de8"]]},{"id":"3976b195.52ca6e","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0253670:4 Schlafzimmer Thermostat 4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":220,"y":640,"wires":[["f0914a68.863de8"]]},{"id":"81a5e7c0.e33aa","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0249067:4 Badezimmer Thermostat:4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":220,"y":700,"wires":[["f0914a68.863de8"]]},{"id":"5f279070.ddd648","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0253750:4 WC Thermostat:4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":190,"y":760,"wires":[["f0914a68.863de8"]]},{"id":"796585e2.38f52c","type":"ccu-value","z":"8ec70f6f.4a3ab8","name":"","iface":"BidCos-RF","channel":"MEQ0249075:4 Dachboden Thermostat:4","datapoint":"ACTUAL_TEMPERATURE","mode":"","start":true,"change":true,"cache":true,"queue":false,"on":0,"onType":"undefined","ramp":0,"rampType":"undefined","working":false,"ccuConfig":"38263145.35ea0e","topic":"${CCU}/${Interface}/${channel}/${datapoint}","x":210,"y":820,"wires":[["f0914a68.863de8"]]},{"id":"991834f3.5e2e","type":"time-inject","z":"8ec70f6f.4a3ab8","name":"Beim Start von NodeRed","nameInt":"¹true","positionConfig":"4811a5b.23b895c","props":[{"p":"","pt":"msgPayload","v":"true","vt":"bool","o":"","oT":"none","oM":"60000","f":0,"fS":0,"fT":"UNIX timestamp (ms)","fI":"0","next":true,"days":"","months":"","onlyOddDays":false,"onlyEvenDays":false}],"injectTypeSelect":"none","intervalCount":1,"intervalCountType":"num","intervalCountMultiplier":60000,"time":"","timeType":"entered","offset":0,"offsetType":"none","offsetMultiplier":60000,"timeEnd":"","timeEndType":"entered","timeEndOffset":0,"timeEndOffsetType":"none","timeEndOffsetMultiplier":60000,"timeDays":"*","timeOnlyOddDays":false,"timeOnlyEvenDays":false,"timeMonths":"*","timedatestart":"","timedateend":"","property":"","propertyType":"none","propertyCompare":"true","propertyThreshold":"","propertyThresholdType":"num","timeAlt":"","timeAltType":"entered","timeAltDays":"*","timeAltOnlyOddDays":false,"timeAltOnlyEvenDays":false,"timeAltMonths":"*","timeAltOffset":0,"timeAltOffsetType":"none","timeAltOffsetMultiplier":60000,"once":true,"onceDelay":"0","recalcTime":2,"x":650,"y":560,"wires":[["c90329eb.3cbd68"]]},{"id":"c90329eb.3cbd68","type":"function","z":"8ec70f6f.4a3ab8","name":"Globale Variablen deklarieren","func":"\n\nvar atuf = [];\nglobal.set('atuf',atuf)\n\n\nvar aroll = [];\nglobal.set('aroll',aroll)\n\nvar heizung = [];\nglobal.set('heizung',heizung)\n\nvar tempist = [];\nglobal.set('tempist',tempist)\n\nvar tempsoll = [];\nglobal.set('tempsoll',tempsoll)\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":940,"y":560,"wires":[[]]},{"id":"38263145.35ea0e","type":"ccu-connection","name":"localhost","host":"localhost","regaEnabled":true,"bcrfEnabled":true,"iprfEnabled":true,"virtEnabled":true,"bcwiEnabled":false,"cuxdEnabled":false,"regaPoll":true,"regaInterval":"30","rpcPingTimeout":"60","rpcInitAddress":"127.0.0.1","rpcServerHost":"127.0.0.1","rpcBinPort":"2047","rpcXmlPort":"2048"},{"id":"f5646a3.725ad18","type":"ui_group","name":"Temperatur Ist","tab":"94476cd1.94e7c","order":6,"disp":true,"width":"7","collapse":false},{"id":"4811a5b.23b895c","type":"position-config","name":"TimControlConfigNode_Koblenz","isValide":"true","longitude":"0","latitude":"0","angleType":"deg","timeZoneOffset":99,"timeZoneDST":0,"stateTimeFormat":"3","stateDateFormat":"12"},{"id":"94476cd1.94e7c","type":"ui_tab","name":"Zustände","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

[Christian-Me]

I experienced the same problem and went to absolute width (defined interactive, stored in content and replayed via msg.uicontrol)

You are not the only one:
https://stackoverflow.com/questions/58533681/tabulator-table-columns-not-resizing-correctly

I believe the issue is related to the layout attribute which you can also change via msg.uicontrol.tabulator message

[Michael-Hennemann]

@Christian-Me : Thanks for the tip!

I changed it to fixed pixel values and now it seems to work. Was a bit tricky thou to find out the right values to fill the whole space and don't get any scroll bars.

[Christian-Me]

Sure it is more difficult than percent values and there are improvements around this issue in later versions of tabulator.

But until we manage to upgrade to 5.x I believe you have to work with pixel units.

If you are interested in the interactive way perhaps look at my ui table handler in the forum.