What are the best practices for sorting tables with sections?

Question

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?

Answer 1

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

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.

Answer 2

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.

Answer 3

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.

Answer 4

Here are a couple more options

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