I'm working with an external system where users can create entities and link them bidirectionally. One entity is the source / the parent and the other entity is the target / the child. So one link will be Parent -> is parent of -> Child and the other link direction is Child -> is child of -> Parent.

Most users using such systems are working with tools like Excel and setup their workflows using tables because auditors must review all the data later on.

Inside a sheet you begin with a "leading element", other columns are related to this "leading column" based on their relations. Given the following example:

  • Leading type: Manufacturer

  • Following type ( parent ): Store ( selling products from different manufacturers )

  • Following type ( child ): Product ( from manufacturer )

  • Following type ( child of store ) : Employee

with the data

  • Manufacturer 1 is selling products in Store 1, 2 ( with Employees 1, 2 ) and owns products 1, 2, 3, 4, 5

  • Manufacturer 2 is selling products in Store 2 ( with Employees 7, 8 ) and owns products 1, 4

Based on the requirements users create their Excel sheets to fit their needs. I created a table component that would generate a table similiar to this one

enter image description here

  • The column order may vary

  • I'm working with rowspans to span "parent" elements across their children

  • It is not necessary that the app runs on mobile devices ( no responsive design / desktop browser app only )

  • There is quite more things to do. Entities have fields, some are displayed in the cell.

Now the tricky part: I don't like that table approach, it's hard to calculate and quite messy. Imagine that each manufacturer is selling n products in m stores with k employees ( and there might be 30 more columns ) that table would be gigantic. And no one on earth would read 30.000 lines of data.

I know, pagination, sorts and filters help but I'm thinking about a different visualization. The tool Gource inspired me

enter image description here

but the problem is that so many relationships would produce "too many" lines on screen. And you wouldn't be able to display the entity fields ( maybe on hover, but you can't display entities with fields in a good way ).

And most users are working column wise, they write down each manufacturer first, then each store, ...

I thought about using something like stepper components ( https://vuetifyjs.com/en/components/steppers/#usage ) but they are not able to deal with multiple outgoing branches ( relationships ) and users are loosing the big picture ( the rest of the data flying around )

Do you have any ideas how to visualize such relationships for users focusing on tables and tools like Excel?

New contributor
Markus Tuchel is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Who are the users? And how do they interact with the information? Jan 25 at 22:34
  • "Manufacturer 1...owns products 1...4... Manufacturer 2...owns products 1, 4" That seems to contradict. Can you clarify what "owns" and "products" mean? And what is a product the child of? Store? Or Manufacturer? Jan 25 at 22:37
  • Are you looking for a Tree Grid, maybe?
    – Andy
    2 days ago


Your Answer

Markus Tuchel is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.