Table Sorter


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


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


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.


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.


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:

plml logo


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.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below