- Forms
- Explaining the process
- Community driven
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.
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?