Hi everyone,
I’m working on a project where I have two tables placed in two different Flex Containers. Here’s the setup:
- The first table (on the right) category (Categoría) contains a subview table with garments (Prenda) where the selected one is highlighted in orange.
- The second table (on the left) also displays other data, with the same selected garment (Prenda) highlighted in orange.
- Both tables have their own scrollbars.
What I want to achieve is to add a dynamic arrow that visually connects the selected garment (highlighted in orange) between the two tables. The solution also needs to adapt when either table is scrolled, meaning the arrow should move and adjust accordingly to always point from the selected item in the left table to the selected item in the right table.
Has anyone done something similar or can offer advice on how to implement this dynamic arrow connection between scrollable tables inside Flex Containers?
Thanks in advance!
3 Likes
Maybe it’s possible with some JavaScript injection. Still, you can post it on the ideas forum and they might pick it up.
That might be possible to pull off with JavaScript to account for the scrolling, but I would ask what the purpose is, and if maybe there's a better alternative design. I don't recall ever seeing that kind of UI design. What is the importance of maintaining all the other rows in that second table that are not being pointed to?
Thanks for the feedback and suggestions. I understand this isn't a common UI pattern, and it may seem unusual, but this is a specific requirement from the client.
The purpose of the arrow is to visually reinforce the relationship between the selected items across both tables, especially since both are scrollable and may lose alignment without a visual guide.
Did you accept this before knowing if it was even possible?
To me, a script which highlights any rows in both tables (based on a click event on either table) seems like a reasonable compromise.
Believe MS Access did this when viewing the database design...
@Chris_Bingham That functionality is already in place. The selected garment is highlighted with a distinct background color in both tables. The arrow is intended purely as a visual aid to emphasize the connection between the two views, especially when scrolling. Still, I appreciate the suggestion!
@pturmel This is an internal project with some specific structural requirements. While the arrow would be a nice enhancement if it can be implemented properly, the main requirement is to maintain two separate tables. If that can’t be achieved, it’s not a problem. That’s why I mentioned the specification to Ryan, because the rows in the second table are necessary to preserve the data structure from the original setup. Nevertheless, as I mentioned earlier, the connected rows are already visually distinguishable, since they are highlighted.
Hi again!
I’ve been doing some more digging and came across an example that shows exactly the kind of visual connection I’m trying to achieve.
LeaderLine Position
This approach seems really close to what I’m aiming for, a dynamic arrow that visually links related items in separate views and updates as you scroll.
