Sort By Column design pattern

The user needs to search or scan a table for values that is of interest

Use when there are many rows in the table (above 10), which makes it hard to single out one row and its relation to other rows
Use when there there are more than one page to show
Use when you want to be able to compare rows in a table – for instance numbers.
Do not use if the amount of rows are few and the table is easy to search or scan.

Each column headline/label is a link. When the label is clicked, the rows in the table are ordered ascending by the specific column’s values. If the same label is clicked again, the order is reversed: the rows in the table are now ordered descending by the specific column’s values.

When the rows of a table has been sorted by a specific column, an arrow is often showed beside the column’s label indicating the direction the rows has been sorted in. It is also often seen that the column’s label is presented in another font color or font weight (bold / regular).

The pattern provides an easy way to get and overview and compare rows in a table. Furthermore, the pattern is also well known from desktop applications dealing with rows of data.

From MS Exchange web-mail

3 Comments

Justin Finkelstein

9 Jun, 2011

This all looks fine until you think about users with accessibility issues: how do you identify to people using screen readers and other such tools that columns are sortable?

23 Aug, 2012

What should be displayed in the following situation:
You’re displaying a multi-column (say 4) list with a large number of rows (say 2000).
The list is initially displayed either sorted by one of the columns or unsorted.
You’ve scrolled or paged so that row 1000 is at the top of the window.
You now click one of the columns in order to sort by that column.
Questions:
What row is now displayed at the top of the window?
Do you redisplay from row one?
Does the result change it you use paging or continuous scrolling?