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, 2015 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 Sep 14, 2015 at 18:52
  • I would expect the sorting to convert it to normal non-hierarchical table..
    – Aprillion
    Feb 12, 2016 at 7:43

4 Answers 4


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.

  • 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 Sep 14, 2015 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. Sep 14, 2015 at 19:33

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.


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.


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

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.