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
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
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?