enter image description here

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?

  • What is the risk you're trying to mitigate? Seems like you're covering your bases. The data in the table will change, the title of the table will change, the breadcrumbs become one step deeper. Is the user really "leaving an informational space"? Seems like they're just loading a new set of data.
    – dennislees
    Jan 19, 2018 at 21:51
  • If I were going to change any aspect it would the aspect that falls under the heuristic called "Support undo". Wanting to go back to the screen before is a reasonable need to have, and it's not immediately clear how to do this in your UI. You might increase the size of the breadcrumbs and make the previous steps look more clickable, or make the previous view always available via a link or button.
    – dennislees
    Jan 19, 2018 at 21:53
  • Thanks for the comment Dennis. Great point on considering making getting back path more accessible.
    – Serge Zuev
    Jan 19, 2018 at 22:02

3 Answers 3


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.


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.

expanded table view

  • 1
    Thanks for a comment, Garik.The reason I decided not go this way is that we have a filter fly out modal for each data grid and in this case, it will not be obvious which data table is being searched when the modal is open.
    – Serge Zuev
    Jan 20, 2018 at 22:56

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.