Table Sorter

Problem

Users need to search or scan a complex table for values that interest them

Solution

Allow users to change the sorting order of the table items by clicking on a column header

From http://www.realestatejournal.com/

Use when

Users are viewing a large table, possible spanning multiple pages, that they must scan for interesting values. There are several meaningful possibilities for sorting the table and users may be more effective if they can dynamically change the column that is used for sorting the values on. Typically, the table contains Search Results but it can also be that a List Builder has been used, e.g. for displaying the inbox in a web-based email application.

How

As users click on the column label, the table is sorted by that column. Another click reverses the order, which can be visualized using an up- or down-wards pointing arrow. Make sure it is visible which columns can be clicked on and which one is active now.

Why

Many users will already know this type of behavior from standard windows applications. It is a very direct way to control sorting in tables, i.e. just one click.

More Examples

Example from a web-based email client:

Example from E-bay:

Comments

1 comment has been added to this pattern.

David Petersen, 12th November 2011

It would be useful to have a list of pattern solutions. Links to style hints on how others have coded a solution.