Solutions to for displaying chained items in a table

Question

I’m working on a table that displays steps (represented as documents) arranged into chains. Different chains can have different step names and different number of steps. When you click on a step, you are navigated to a details page where all the steps of the chain are displayed, and you can click through them.

In the table, the last step of each chain is displayed in the collapsed mode by default. To see previous steps, you need to click an arrow on the left. There is no parent entity in the table that encloses its children.

Here is a rough wireframe (I got rid of any domain-specific names to put the structure into more focus):

My questions are:

1. Is there a better way to display chains of rows in a table? I guess this pattern isn’t uncommon for document management systems, but I was unable to find any examples.
2. I’d like to show the progress of each chain in the table, for example, "4/6 steps completed". However, I'm not sure where to put this element. Placing it in the top row would suggest that the progress is related to a specific step rather than the whole chain. Is there a way to display progress tracking for each chain without including a parent entity row?

Answer 1

I think row grouping will be suitable in your case. Your prototype image seems to lack Chain column as each chain most possible should be identifined in some way. So, instead of adding Chain column it's possible to make grouping row which could:

• be expandable
• display current progress as you required

Here is one of many possible examples, randomly selected from Google results on 'Collapsible grid' query:

Image source: https://www.ag-grid.com/react-data-grid/grouping-group-rows/