Sortable Table

Example of the Sortable Table UX pattern.

Problem

You won’t know ahead of time how users will prefer to view information in multi-column tables, and different activities require different views of the same information.

Solution

Provide users with the ability to sort data in column based tables.

Context

There are many data attributes to view, and therefore many different options for sorting.
You don’t know ahead of time exactly how a user will prefer to view the data. For example, there is no standard to conform to.

Rationale

In most cases it will be impossible to know ahead of time what users need to do with data. Different activities require looking at even the same data in different ways, usually accomplished through sorting one or more columns of data.

When you know the data will be presented to users in a column based table format, the best thing to do is to make it as easy as possible for users to sort the data by one or more of the columns.

Implementation

The simplest way to allow users to sort is to enable each column of data to be selected in a way that sorts the data based on that column. For example, for single column sorts the user should be able to click the top of the column to sort by that column. One standard practice is to use arrows at the top of each sortable column as an affordance that this is possible, using the direction of the arrow to indicate the sort order (ascending versus descending).

There are a couple of standard ways to enable multi-column sorting. The first way is an extension of the affordance of single column sorting. In this case, multi-column sorting is enabled by allowing users to click on multiple columns in the order they wish the sort to occur while pressing an additional key such as the control key.

The second way to enable multi-column sorting is through the use of controls separate from the table, such as drop down buttons just above the table, or through the use of a view customization screen separate from the table screen.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Sortable Table pattern is implemented in the following ASP.NET controls: WebDataGrid, WebGrid. Check out the samples browser to see it in action.

Silverlight

You can use the column sorting capabilities of the NetAdvantage for Silverlight xamWebGrid control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinGrid and WinListView to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid Samples -> Sortingto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF xamDataGrid control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Field Sortingto see it in action.

Examples

The primary example for this pattern comes from the File Explorer in Microsoft Vista. The items in the table can be sorted by name, date, or type.

http://quince.infragistics.com/11fd

Example of the Sortable Table UX Pattern

This example taken from Inxight TableLens shows how even non-standard data can be displayed in a sortable table. This table in a sense allows for the presentation of multiple bar charts in a manner that allows any of the columns (i.e. bar charts) to be sorted.

http://quince.infragistics.com/113e