How to communicate the user that they are leaving one informational space and go to the other when both of the spaces visually identical?

Question

If the user wants to see the child data set and clicks the corresponding field in the "Parent data listing" the link leads to the next table "Child data listing". Both tables visually identical and there is perceptual difficulty to realize that you are leaving one informational space and entering the other.

The obvious solution would be to make the row of the Parent table expand in accordion fashion and display the child data listing below the parent row. The reason we cannot implement this pattern is that the Child table can have hundreds of data rows as well and all fields will need the same functionality as the search filter, add new etc.

What could be a solution without creating animated transitions?

Answer 1

Your initial solution looks good. I would suggest displaying a clear distinct section with the clicked parent row details at the top of the child grid to help the user easily identify that the child grid is related to which parent row item the user has clicked. I believe this would provide better understandability removing the perceptual difficulty in realizing that the user has moved from one informational space to another to a larger extent.

Answer 2

Your initial solution is a good, just add scrolling to contain hundreds of data rows, search and filters can be added to headers or expanded row as below.

Answer 3

You can add the row that was expanded as an additional header row (maybe in a slightly different bg color) to show the context of the sub-rows. Where the checkbox is positioned for the sub rows, you can have a "return" icon that will take the user back to the main table.