well I work on complex SaaS which has two tables currently. Pretty much when you select one row in first table second one loads data (it's like software for restaurants/coffee shops etc.). Currently they are one under each other but request came for whole redesign and they want it one next to each other.

Even on 1920px it's not doable so I don't know do you guys have some solution or example in wild of this done ? It's not just a simple table tho, it has it's own filters, buttons, etc.

  • 3
    Does all info in the tables need to be seen/viewed side-by side fully, or is there some information in either that is most relevant to what the suer is trying to do? Can you give more of a use case and/or workflow example and some screen shots could help, to see the number of columns, filter config focus, etc.?
    – Mattynabib
    Commented Jul 11, 2023 at 14:41
  • resize the tables or make them scrollable, there really isn't much options if you work with tables
    – Devin
    Commented Jul 11, 2023 at 15:36
  • Do you know why they want it next to each other? Otherwise find that out first. It is possible that you are looking at an XY problem.
    – jazZRo
    Commented Jul 12, 2023 at 8:17

3 Answers 3


It would help if the question included an example of what it currently looks like and what they want it to look like.

My suggestion would be to make all of the first table disappear except for the selected line, which is displayed at the top.

Alternatively, the first table could be retained at the left, but only a few relevant columns displayed until it is selected again (in which case the second table could temporarily disappear).

But the real question is, why do "they want it one next to each other"? In particular, what problem do they perceive with the current version, and how will the new version alleviate it?


great question, let me try to answer it:

It looks like you have a 'parent' and 'child' DB's that your users access to view or edit some of its properties. I'm assuming this request arose because they often need to jump back and forth between the two.

Firstly, I would be careful about putting two tables side by side:

  • Might not be intuitive that they are indeed parent-child
  • Potential performance issues and laggy UI
  • Wouldn't work as good on smaller screens.

How about something like this:

1. Show a parent table inline in full width. This way you are not composing the table UI: you can have filters, change columns visibility, etc: step1

2. Show child table in an overlay. This way you keep the context of their previous step visible in the background, as if it's an extra layer of information on top:


3. Allow jumping back and forth. Introducing a 'minimise' paradigm is one way of achieving this. You can extend this further to allow minimising not one but multiple parent nodes.

enter image description here

I hope this helps!


I solved problem with two tables with accordion in which when I expand first row in the table I get dropdown (more info about expanded row)

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.