Sort By Column

Problem summary

The user needs to be able to sort the data in a table according to the values of a column.

Examples

No items found.

Solution

Extend the table functionality so that each column table heading is a link. When the heading is clicked, the rows in the table are ordered ascending by the specific column’s values. If the same label heading is clicked again, the order is reversed: the rows in the table are ordered descending by the specific column’s values.

When the rows of a table have been sorted by a specific column, an arrow is often displayed beside the column’s heading indicating the direction the rows have been sorted in. The column’s heading is often presented in another font color or font weight (bold / regular) to indicate ordering has been performed.

Rationale

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

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE