Table Sorter

Also known as: Table Sort, Sort by Column, Sortable Table

Tags: content, showing data, tables

Allow user to control data order in tables by including sort option for categories (i.e., column headings).

In this example, table columns can be sorted in alphabetical order and from highest to lowest by clicking the column title. Sorted column is indicated by a sort glyph displayed at the column header's right edge and highlighting the title.

In this example, table columns can be sorted in alphabetical order and from highest to lowest by clicking the column title. Sorted column is indicated by a sort glyph displayed at the column header’s right edge and highlighting the title.

What problem does the pattern solve?

  • Use when there are many rows in the table (above 6) which makes it hard to single out one row and its relation to other rows
  • Use when you want to be able to compare rows in a table.
  • Not necessary if the amount of rows are few and the table is easy to search or scan.

When to use it?

  • Use when there are many rows in the table (above 6) which makes it hard to single out one row and its relation to other rows
  • Use when you want to be able to compare rows in a table.
  • Not necessary if the amount of rows are few and the table is easy to search or scan.

How to use it?

  • Selected column’s label is presented in another font color with an arrow beside the column’s label to indicate the direction the rows have been sorted in.
  • Each column headline/label is a link.
  • When mouse hovers over a column heading, the heading will highlight with Tool tip: “Click on column heading to sort.”
  • 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
Defaults:
  • Date: Reverse Chronological, most recent to older
  • Alphabetical: A-Z
  • Numerical: 0-1
  • Phone Numbers: Numerical by first numeral (area or country code)

Why to use it?

The pattern provides an easy way to manage the information and highlight user’s critical information. Furthermore, the pattern is also well known from desktop applications dealing with rows of data.

Useful linksUseful links icon

Example images (2 examples)

Comments

  • There are no comments posted yet. Be the first one!