Average rating is 0% positive
0.0
2 votes
This pattern was helpful This pattern is useless

Sort By Column

Problem summary

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

Example

Example image showing 'Sort By Column'

Usage

  • 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.

Solution

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).

Rationale

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.

More examples images of the Sort By Column pattern

From MS Exchange web-mail
From MS Exchange web-mail

This pattern was last updated on February 07, 2008

Post a comment

Required
Required
Will not be published
simple_captcha.jpg
Required
Type the code from the image