3

When you have a table with sections, the sections denote a hierarchy for instance:

Name                             Corners                     Perimeter
- Standard Shapes                 7                          105
    Rectangle A                   4                           25
    Triangle B                    3                           23
    Circle C                      0                           57
+ Red Shapes                     34                          235
+ Blue Shapes                    24                          145

What would you expect the table header sort to do? Or what are some good design patterns to implement a sort also for the bottom level rows?

  • Could you add a column between "Name" and "Corners" to house the nested elements (Rectangle A, etc.)? – Andy Sep 14 '15 at 15:49
  • @Andy Yeah, the design/identification I know how to solve, what I'm wondering though, is how to so a secondary sort – Dina Neishtadt Sep 14 '15 at 18:52
  • I would expect the sorting to convert it to normal non-hierarchical table.. – Aprillion Feb 12 '16 at 7:43
2

I really liked an example from this article regarding table patterns:

enter image description here

I think the grey text of the cells that are clearly in the same row as the header/total helps to differentiate them from the actual sortable/expandable data. This example is missing controls for sorting, but I would assume arrows/chevrons/triangles/etc. would be in place beside the column labels.

| improve this answer | |
  • I also like this example, but not sure how do you do a secondary sorting here. Meaning, if the user clicked on May - should it sorted the gray rows or the black inside the gray? We have a need to sort the black, but not sure how to make it clear that I'm sorting inside the sections – Dina Neishtadt Sep 14 '15 at 18:53
  • 3
    Yes, primary sorting would sort the unexpanded views. You could put the same sorting controls in the summary/total (grey) row for each expandable section. – Ashley Richards Sep 14 '15 at 19:33
1

I guess sorting nested tables would sort each subset, not all of them combined together.

The same logic is used in table/grid grouping - sorting there sorts the items within each group, while there is another button that can reorder the groups based on the value of the field used for grouping - checkout this example for a live demo of that.

| improve this answer | |
0

Because your secondary sort is under Name, I would recommend that clicking on a subsection name (Standard Shapes) would toggle name sort a->z / z->a just for that section. This way you are only sorting on one data point (name) and in a single manner (alphabetical) even with 2 levels.

| improve this answer | |
0

Here are a couple more options

  1. Consider a sort control that lives outside table headings enter image description here
  2. Add additional options to each heading (menu); it will allow you to sort my more things than just one parameter enter image description here
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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