# Failure to create my first UI table

**URL:** <https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087>\
**Category:** Dashboard\
**Created:** [22 May 2021 11:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087 "2021-05-22T11:02:28Z")\
**Posts on this page:** 8\
**Page:** 2

<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:** [25 May 2021 10:45 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/21 "2021-05-25T10:45:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 May 2021 21:10 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/22 "2021-05-25T21:10:17Z")

</div>

> [@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](https://stackoverflow.com/questions/53137943/adjust-tabulator-row-height) 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](https://github.com/Christian-Me/node-red-ui-nodes/tree/master/node-red-node-ui-table)) 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](http://tabulator.info/docs/4.0/layout) says this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41e439a8bef86d3f85a35ec2e3d493a98f59e400.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/531cea5d831ca467401759d6354ce3f6760ac49f.png)

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6cb51e34723e1220cd4d3822f03cfa708eb85f01.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5de655e368edbc19f9e8b9288ca096c8a7106f32.png)

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

---

<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:** [25 May 2021 22:01 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/23 "2021-05-25T22:01:52Z")

</div>

> [@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:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/67003f30dc8f86f4f9da4ff8ac98f102350a5dba.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c2821be79348725a813b47ecd49b0386ea362743.png)

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

---

<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:** [26 May 2021 19:55 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/24 "2021-05-26T19:55:23Z")

</div>

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.

---

<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:** [26 May 2021 23:25 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/25 "2021-05-26T23:25:17Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 May 2021 22:13 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/26 "2021-05-28T22:13:37Z")

</div>

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

---

<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:** [28 May 2021 23:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/27 "2021-05-28T23:02:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 June 2021 23:02 UTC](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087/28 "2021-06-27T23:02:46Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.nodered.org/t/failure-to-create-my-first-ui-table/46087.md?page=1)