7

Users wanted a way to view kinda-related data for records in different tables. The solutions was to take those and make them child tables of the rows in the parent table. It will probably be easiest to explain with an example.

Imagine you have a table of restaurants with an extreme amount of data for each record (talking horizontal scrolling here). This grid also includes several (anywhere between 1 and 15) columns with + buttons, though I'm planning on collapsing them into a single button with a popup to select which grid you wanted. These buttons have tooltips indicating the various subgrids you can see (for example, locations or menu items). When clicked, a row beneath the clicked cell expands with a new grid containing info relating to the button clicked. Multiple subgrids can be expanded at the same time, including for the same parent row.

Example mock-up

Personally, I don't care for the design. The problem is that the users still want to be able to see all this information on the same screen for multiple records, so links to different pages and popup windows are not an option.

What are some alternatives to this table-in-a-table layout I could use?

Improve this question
3
  • Since they want to see multiple sets of data for which tabular representation seems to the be best choice, and these need to be nested in an existing set of parent, tabular data, plus pop ups and external views are not an option, I think that probably you are right: this seems to be the best to come up with. I would only search for e.g. MS Access data subsets examples for some inspiration, or ask on Stack Overflow for some suggestions of frameworks to use for that.
    – Dominik Oslizlo
    Mar 23, 2017 at 17:07
  • You are on the right path. The best way is always to hide the child table. There is no other way around that I have seen anywhere. We can try repeating main table data and display all the records in one table, but duplicated data is never a good idea.
    – jitendragarg
    Jun 22, 2017 at 15:56
  • Do users want to see half info of some items and all info of other items? Or do they use the initial table to select which sub-information to show? If the latter, you can look at designs with 2 pages (select and show) or a sidepanel layout.
    – PixelSnader
    Aug 22, 2017 at 9:43

2 Answers 2

Reset to default
1

A more specific solution that is more related to stackoverflow but, whenever I have to deal with tables I lean towards the dataTables plugin.

Check here an example of how it displays 3D data : https://datatables.net/examples/api/row_details.html

Here's an example :

enter image description here

It also works with bootstrap and many other popular css frameworks.

But in your case you might want to have a modal popup that will display the information.

Improve this answer
0
-1

Since they want to see multiple sets of data for which tabular representation seems to the be best choice, and these need to be nested in an existing set of parent, tabular data, plus pop ups and external views are not an option, I think that probably you are right: this seems to be the best to come up with. I would only search for e.g. MS Access data subsets examples for some inspiration, or ask on Stack Overflow for some suggestions of frameworks to use for that. @Dominik Oslizlo's commment

As Dominik said, I would possibly suggest asking on StackOverflow as the folks over there might have more experience in large quantities of data and possible solutions. Here at UX we are not necessarily experts when it comes to your options, but rather can provide a detailed look at why one option might be better than another.

With that being said, I don't think you have many options here unless you were to expand to a completely new layout. This biggest blocks for you are the extreme amounts of data and horizontal scrolling, as well as the need to see multiple data points at a time. Try to eliminate or minimize either of those if you want to improve the design.

Improve this answer

Your Answer

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

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