Flowfuse dashboard table showing only one row, with a scroll bar

Dashboard
1

I am trying to use the flowfuse ui-table for the first time, sending it an array of objects to show. It shows only one row at a time, with scroll arrows.

image
image1112Ă—126 1.67 KB

Am I doing something stupid, or is it possibly some CSS I have applied elsewhere?

Nothing unexpected in the browser console
@flowfuse dashboard 1.26.0
node-red 4.1.0
nodejs 22.18.0
Edge browser

Edit: As usual, I forgot the flow:

[{"id":"8d9e258b67f5f11c","type":"ui-table","z":"f4025e05580a9718","group":"ui_group","name":"","label":"","order":0,"width":"8","height":"14","maxrows":"0","passthru":false,"autocols":true,"showSearch":false,"deselect":true,"selectionType":"none","columns":[],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"replace","x":310,"y":640,"wires":[[]]},{"id":"bfe29a4479e60803","type":"inject","z":"f4025e05580a9718","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"rp\":\"x\",\"count\":12345},{\"rp\":\"y\",\"count\":12346}]","payloadType":"json","x":130,"y":640,"wires":[["8d9e258b67f5f11c"]]},{"id":"ui_group","type":"ui-group","name":"Influx Analysis","page":"2f0b6b91a7545295","width":"8","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"2f0b6b91a7545295","type":"ui-page","name":"Influx Analysis","ui":"ID-BASE-1","path":"/influx_analysis","icon":"home","layout":"grid","theme":"f9b6670b127dc219","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":-1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"c5ea4e8bf70dfb7f","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.26.0"}}]
2

As usual, I forgot to include the flow. I have edited the post to include it.

3

I'm seeing this too.

What I am failing to remember is can (should) a group be allowed to have a height setting? Because your tables assigned group has a height of 1 row (and can be resized). I am questioning my sanity right now!

4

Groups shouldn’t have a height, but setting the height on the table should resolve this? Also having the table as a height of “auto” should make it auto resize to content too?

5

It is normal to size the group with a height of 1. It resizes to fit the widgets. The table is surrounded by a red border which is the full size of the table widget. It just isn't using the available space inside the border for some reason.

In fact the ui of the group node will not allow anything other than a height of 1.

6

The table size is specified as 8x14 and the border is drawn at that size. However specifying the size as auto allows it show correctly. So it appears that the cause is specifying a fixed table size.

7

That's why I was perplexed. I was actually able to adjust the group sizer to > 1 height. My theory is the height as somehow gotten a value and is causing the size limiting of the table.

8

I have tried a new table with new group and new page and it still fails.
Has anyone succeeded in showing a manually sized table in the latest dashboard version?

9

There seem to be two ways to display data in a table:

  1. Set the table size to Auto.
  2. Specify a size in the widget config and apply CSS:
.v-table__wrapper {
    overflow: visible;
}

Note that this CSS is a work-around not a fix; both auto and manually sized tables have overflow: auto;. It seems OK for auto, not for manual.
I can't find the attribute which causes the issue on manual.

I concluded that the table widget does not work.
Put your table in a template.

10

Okay, in that case, you've found a bug. Please raise an issue

11

Done: ui-table only shows one row if size is set to fixed · Issue #1804 · FlowFuse/node-red-dashboard · GitHub

12

Or use @omrid s tabulator node. I first used this node as a trial after someone asked a question about it. It is very easy to use

1 Like