Ui-table scrollbars

Dashboard
1

First time of using the ui-table node, and finding that I'm always getting a vertical scroll bar, and the bottom row is clipped.
This was reported in February by @droberts in this unanswered post.
There is no styling added and the container is much deeper than the chart requires.

I'm using the current version of the node.
Node-RED version: v1.0.3
Node.js version: v10.19.0
OS: Linux 4.14
Dashboard version 2.19.4

table

@Christian-Me - any ideas Chris

2

I know there is an issue in the horizontal hight with a more or less working but no elegant fix. I did some modifications but didn’t had time for extensive testing.
One question, how do yo feed the data in, as a full table (array of objects/rows) or send single rows or cells.
Second question has the node a fixed size or set to “auto”?
All my tables (unfortunately) need vertical scrolling.
I can hopefully take a deeper look the next days - I promise.
Sorry @droberts for not recognizing your post.

3

No worries, I either sorted it or built my own table thing! Will check today.

I was feeding it data for the entire thing including headers etc, running on a Pi and also on Windows.

I tried both fixed size and auto, both had scroll bars no matter how big and there tended to be a gap at the bottom.

4

The problem lies in determine the correct height of the final table. So header and rows including spacing, borders ...
You can find the relevant lines easy and play around with the constants and multiplicators to find the correct total hight
Another attempt i prefer is to set the height to the available space of the widget (black area on your screenshot). But the grid size of the dashboard and the hight of the rows are different and interfere so in some cases you get cut of last visible rows when you table data reach the last row.

5

As an array, here is a small example flow to demonstrate;

[{"id":"c7936fea.41548","type":"ui_table","z":"c9c4eeb8.bad8e","group":"e68a1b8a.416f18","name":"","order":13,"width":"4","height":"4","columns":[],"outputs":0,"cts":false,"x":640,"y":750,"wires":[]},{"id":"9eb02be5.fc7888","type":"inject","z":"c9c4eeb8.bad8e","name":"","topic":"","payload":"[{\"Sensor ID\":\"TH22\",\"Daily Totals\":\"2\"},{\"Sensor ID\":\"TH19\",\"Daily Totals\":\"35\"},{\"Sensor ID\":\"TX18\",\"Daily Totals\":\"35\"}]","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":490,"y":750,"wires":[["c7936fea.41548"]]},{"id":"e68a1b8a.416f18","type":"ui_group","z":"","name":"Default","tab":"6952137b.75c85c","order":1,"disp":false,"width":"24","collapse":false},{"id":"6952137b.75c85c","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

Tried both, and get the same result.

6

Hi Paul,
If you send the complete table data in as an array it tries to calculate the table hight by multiply the array.length by the row hight and add the header hight. This may result in inaccurate result due to browser, font or css differences and the scrollbars appear.
I will issue a PR in the next days to make ui-table to use the full available vertical space when not in auto size mode regardless how you deliver the data.
This may result in a cut off last visible line but is expected and not a problem as the scroll bars will kick in. And opens the space of any kind of data manipulation later, like adding lines dynamically.

2 Likes
7

Submitted the pr .... (home-office makes it possible to sneak out and do some other things ... ok this was a quick lunch break thing :wink:

Stay healthy, stay home, keep distance, enjoy the sun.

8

That's a bit optimistic for the UK :slightly_frowning_face:
However, looking at the satellite feed, it looks like you are having plenty of sunshine today!

9

Yes, it’s wonderful and peaceful in my garden - hard to stay in front of the screen - But so many things on my todo list.

2 Likes
10

Problem should be solved with 0.3.1
Perhaps give it a try.

1 Like
11

I'm not back home until Saturday, but unless someone else gives you an update in the meantime, I'll get back to you then.

12

Take your time, take care.

1 Like
13

Hi Chris, your latest version works fine, and the scroll-bars no longer appear, when there is no overflow.
Thanks for fixing.

table

1 Like
14

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