Responsive Data Tables

[joepavitt]

Description

Proposed here: https://github.com/flowforge/flowforge-nr-dashboard/issues/16#issuecomment-1608288550

Properties

• columns/rows
• Style should be responsive and switch to "card" views on mobile/narrow layouts

Events

• on-row-click: this widget could have an action triggered when selecting a given row of data?

Controls

No response

Existing Examples

Vuetify table: https://vuetifyjs.com/en/components/tables/

This does not include an auto-wrapping to a "card" view as requested though.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[thebaldgeek]

I think the responsiveness of the table gadget has regressed in v 0.10.2?

I now have to stretch my browser over the full width of a 4k + 2k monitor to see the last few columns (in the red square). The lack of a horizontal scroll bar makes it impossible to see the data on anything less than 6k of screen.

I chose to switch to a monospace font (Lucinda Console) with the v1 table to help the readability. I see that the v2 table does not have the option to set the font type at all?

Being able to set the column types is critical, link, html etc (and I see a request in for that), but having only about 5% responsiveness is making it tricky to use. (It does expand and contract around the 5k monitor size, but no less).

Here is the exact same table and data on the v1 dash on the same center monitor and Chrome browser.

[joepavitt]

New issue opened to track that particular issue, thanks @thebaldgeek

[joepavitt]

Challenge is is how to detect when to go into responsive mode. It's difficult to judge based on overflow/overlap to then switch, as no JS events are fired in that occasion, and I don't really want to be watching every single cell of a table for overflow manually.

The "easy" here is a screen width option, but similar, if it's just two columns on a mobile, then, in theory, that's fine to render as a table?

I'll move forward with building out the card/mobile view now, but the logic for when to switch to that view needs to be refined/decided - @thebaldgeek thoughts very welcome here.

[joepavitt]

https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122 has a really good summary of the different way to render/handle the responsive layout

[joepavitt]

Option 1: Horizontal Scroll

The quickest iteration here as it's a single line of missing CSS.

[thebaldgeek]

That was a REALLY solid read, thanks for the link @joepavitt I'd like to add a few other options that I think Dash 2.0 (almost) has:

1. Option to hide columns. I only see this is in the soon coming tabulator node, but is very exiting for my use case. Allowing anyone to tap a column header and chose to hide that column from their view.
2. Added to point 1, the 'multi user' option. Every single user can customize the table for their view and the table will remember it for them. Only an option on the soon coming tabulator node thus far.
3. Sadly, only an option on the ui_table, not vuetify or tabulator, but having a 'search' field at the top of the table is mind numbingly powerful for larger tables.

[joepavitt]

Option to hide columns. I only see this is in the soon coming tabulator node, but is very exiting for my use case. Allowing anyone to tap a column header and chose to hide that column from their view.

This is tricky from a UX perspective, as the default behaviour here is to sort those columns. This would add complexity to that interaction. How do you envision the options appearing?

[thebaldgeek]

I found it really easy to do on desktop, tablet or phone.

Click the three dot menu on any column and then select the column you want to hide from there. As soon as you do, the column drops off the table shrinks in width.

Im just unable to get right msg.payload / tablecmd working in Node-RED with the tablulator node at the moment, but will take it up with the dev in a few weeks. Excited to see it in action with real data.

Here it is on the tabluator site: https://tabulator.info/docs/6.2/menu

[joepavitt]

Going to move this back to the backlog having delivered #829, but won't close as there are iterations we can do here.

[joepavitt]

This just got a lot easier as Vuetify just released mobile support in their core library:

https://play.vuetifyjs.com/#eNqNVN9v2jAQ/ldO7IFWIvxqadeIVqpKt3Xd096mglSTHGDVsSPbgTLE/74ziQNEQewFkvu+++678zlvm4bRUecxTdvLDBthY2gxSQWz+DCWAMNlEDPLAsumAl0AYBkkKkYR4mfKZIzx/bjhH8eNnBLO+CfGwQJZjJpwqzMssTxqKFw8lQin0i4eozGo7R5I1JQLJMQkjzIeqZXcQ5mwPDBKW4JnTJiykFMLlkxkLlGy5AgwQYo6SNncgQOP2AUmLhAz/eFjZqFWQd7gQcCgwMi6wG5MNCg/Nvjy9p431nZF3ycP4P4hj4ERysKwczTkSrbz146YUJqjcfn+eef8vII/jUCrFTWzAU5vny2IlMgSaWA7bhRJLk2Xz+4thpBohgQos0hoC5Rzu6CsFycUwqaQhO0Wnoti8FutyFS8V+6U0hWzw87hUlHoCKdXE2meWjBosxQEk3O3QrQNu2yepHTYsAGNM9jCTKsEmrS6zSMwMzjihjTXhxzLZ2viOWakpHHEcqOId3+QdnF5yPMjJQqVvXibEOqxYos9lLe88WOw3AoMoTnKdxouet3unFrTSy7nl82W5zHB55J4xjJt92G32G5KIex2u4x/4JrIbrE8d1v8b8qST8XaNFsF3e9Rs4b8jZE3Z6jgzpito5X4/gCLy+HZE2Amn8zBjPyNPjEk14fzoNVflPBHzbPDGXjbIfQGd2WUDIZwU22+ovgSIUQaGd0asrji0QJW3C5orHQjKS7EGoSS8x2/rmL/6va4ojdwquJzJBjXtVI3/WOp3jn3T1kasY9aX1fdwbHYVdsbPaX2nRYO9ZS6jmsVB97O/9r7iW58U2SyVu+24rB7Ru6XEoKnKq0Vu6vMrtv2gVNyP5TEdaSSaZ3edfdrdXzn9EZKZrVLeT2oeOv7xk9JvXL7SterRmvQq/jqHx+C++4MO/n3kb6GjW1LZkLsfib/AHp8W6U=

We just need to pass in the :mobile property to define when we want the table rendering in mobile/card mode.

[thebaldgeek]

That link takes me to a sandbox with a bunch of code. I cant see any hint of mobile support there or how I would add it.

I did find this a little more helpful: https://vuetifyjs.com/en/features/display-and-platform/#usage Seems you can have a few different breakpoints which would be fantastic and very powerful. I'm unsure how to use any of that in Node-RED dash-2 since I recall you mentioning that the template node does not report back to the code running in it the viewport information from the browser. Also their enforced pagination still seems to be strongly in play no matter what you set the breakpoint to be.

[joepavitt]

That link takes me to a sandbox with a bunch of code. I cant see any hint of mobile support there or how I would add it.

It wasn't in reference to how to use in a Template node, but in reference in our own implementation in core.

The new version of Vuetify (which we haven't pulled into Dash 2 yet) has a new :mobile property on the data table, when set to true it will render data cards instead

[joepavitt]

template node does not report back to the code running in it the viewport information from the browser.

It does have access to the viewport sizing, as that's just a standard JS thing

It can also get the size of itself with this.$el.clientWidth, which will return the width in pixels

[joepavitt]

Also their enforced pagination still seems to be strongly in play no matter what you set the breakpoint to be.

As I shared on the forum, there is no enforced pagination. If you're using the Dash 2 table, there is an option in the node's config to turn it off.

If you're writing raw Vuetify in a template, then:

"For those arriving here using Vuetify 3, I've found adding an empty footer slot achieves the same:" https://stackoverflow.com/questions/57371009/vuetify-remove-pagination-on-v-data-table#:~:text=For%20those%20arriving%20here%20using%20Vuetify%203%2C%20I%27ve%20found%20adding%20an%20empty%20footer%20slot%20achieves%20the%20same%3A

[joepavitt]

Closed by #1206