Can the table scroll UNDER a template?

[thebaldgeek]

I have a template node at the top of a dashboard tab, under it is a table node.
When you click on a table row, the contents of that selected row pop up in the template.
The problem is that the table node can often extend beyond the bottom of the screen height.
When you scroll down, the template node scrolls off the top of screen and so you are constantly scrolling down, clicking blindly, scrolling up to read the details, then scrolling back down to try and find where you were and clicking and scrolling madness ensures.

Since a picture is worth a 1000 words, here is how the screen looks when you first start....

When you scroll down, here is how it looks...

Two main questions.

1. Can I highlight the row I clicked on?
   Its too easy to forget what row you last selected when you are scrolling up and down.

2. Can I have the table scroll UNDER the template node at the top?
   I have seen websites do this where their header / menu is always at the top of screen even as you scroll down. Very powerful and clean.
   (Note, having the table scroll under the template would pretty much eliminate the need for the row highlight I suspect).

Thanks for your thoughts on the matter.

[dceejay]

How have you set the height of the table ? If you set it so its less than the page height the table contents should scroll inside their widget and not the whole page.

[thebaldgeek]

Oh, that's a pretty nice workaround for the table. I never thought of that.
Yeah, I see now, thanks!
It might just get me by....

Any thoughts then on point 1?
As you scroll down, you still lose track of where you are upto.

BTW, here is how it looks with your idea implemented and scrolled down a bit....

It sort of requires me to 'know' the average size of my users screen and set the height less than the smallest, but eh, I can live with that.

Thanks!

[dceejay]

I've not checked recently but I'd be surprised if one of the more advanced built-in examples by @Christian-Me didn't have highlighting

[thebaldgeek]

Again, good idea, been a while since I have looked....
Just imported all the examples into a fresh Node-RED build and none of the example tables highlighted the row....

Will keep kicking at it, thanks for the weekend support.

[Christian-Me]

The feature is called „select“ row! And it is included in the last example. Here is the doc:

Tabulator - Interactive JavaScript Tables

Think setting “selectable“:1 should highlight only the last selected row.

@dceejay I mentioned it a while ago that there is no limit for the widget hight if set to auto in ui-table hight always = amount of rows. Do you think a limit is usefull? I never use auto so I don‘t care

[thebaldgeek]

Thanks for your help @Christian-Me

The last example is copy-paste...

It does not highlight the selected row.... What am I doing wrong?

I can't figure out the link between Tabulator and Node-RED... sorry.

As for 'Auto' height, never used it in any of my ~30 odd dashboard pages so cant offer much there.

[thebaldgeek]

Ah. I have been looking at that one for a while....

When you click on a row in that example, it does not highlight, but you do get a message 'an error occurred'.... That's a start.

Thanks for pointing me in the right direction.

[Christian-Me]

Think you have to update ui-table first. It is example 6:

[Christian-Me]

This is sent if you switch the selectable button to on. true means multi selection. if you send a 1 should get what you want:

[Christian-Me]

And to totally confuse you: you can do the details in ui-table directly using the responsive layout feature:

[Announce] remote device table (and collaboration wanted)

Hello after a lot of work (perhaps too much work) I like to share my first beta version of a flow to display the status of remote devices on the dashboard. It is always good to have an eye on your sensors and actuators especially when they are connected wireless or battery powered. The flow first developed around my homie-convention-node but soon I decided to make it more versatile because I have devices around the house which not support the homie convention. [teaser] Currently supported are…

Something for long lockdown nights instead of going into the local bar.

[thebaldgeek]

Thanks.
Confused enough...

msg.ui_control.tabulator[selectable]=1;
is throwing; "TypeError: Cannot read property 'tabulator' of undefined"
So yeah, its very confusing for a low-code guy like me.... will keep chipping at it, hopefully will get something we can post here for others.

[Christian-Me]

Use the ui-control node and send on „change“

msg.ui_control.tabulator.selectable=1

to ui-table

Or together with your payload

[thebaldgeek]

That's not an option.

But I think I get where you are headed.... I was missing the fact that I have to 'detect' the row click and handle it as a different event.

[Christian-Me]

"change tab or ..." is the right option, You can see the output in the demo flow (on the dashboard and with the debug nodes. Every row click send a standard message. if you need other function you have to write your own callback function

[thebaldgeek]

For those following along or finding this via a search.. After more than a few hours work I have had to give up and move on.
The ui control node just does not output anything (ever), so thus I cant detect a table row selection.
Such is life.

Thanks everyone for you help.
Making the table shorter makes a big usability improvement to the system.

[dceejay]

eh ? that doesn't compute - the ui_control node will provide a change event every time the dashboard connects or changes tab (or every deploy)... the ui_table node provides events when you click on a row.

What is being suggested is to use the ui_control change event to provide an input to the table to tell it to be selectable. - You also then need to catch any select event from the table and save it so that it know which row was selected, so you can then feed that back in on next change, etc.

[thebaldgeek]

I totally agree. Makes no sense at all.
Here is how things look.

And here is what I have selected in the UI Control Node.

I have been using Node-RED for over 5 years and have a bizillian hours into this project and honestly, this is the first time it just flat out has not worked... no errors, and no debug messages. It just simply does not do anything.
You can click that row all you like and nothing will ever get detected.
The only time you get a debug message is when you change tabs in the dashboard.

At first I thought it was because I was using the wrong ui table node.
I had node-red-ui-node-table nodes installed. So I exported everything, uninstalled that node and installed
node-red-node-ui-table and reimported all my tables (that took about an hour).
Here is the table node I am now using.

No difference at all.
Still no row click events.

Node-RED ver 1.2.7 (Windows 10 home)
nod-red-node-ui-table ver 0.3.10
node version 10.16.3

[dceejay]

Errr. The click events come out if the table node. So you need a debug on that.

[thebaldgeek]

Wow.... I sure feel like a total noob.
Ok, getting click events.
Just need to figure out how to action them....