Sort By Column

The user needs to search or scan a table for values that is of interest. How to sort data by column?

Overview

To find expected information more easily, users often sort data by specific criteria. Sort By Column is a pattern which arranges the data display depending on criteria of a specific column.

How it works?

Template

Name Salary Extension Start date Start date (American)
Bloggs, Fred $12000.00 1353 18/08/2003 08/18/2003
Turvey, Kevin $191200.00 2342 02/05/1979 05/02/1979
Mbogo, Arnold $32010.12 2755 09/08/1998 08/09/1998
Shakespeare, Bill $122000.00 3211 12/11/1961 11/12/1961
Shakespeare, Hamnet $9000 9005 01/01/2002 01/01/2002
Fitz, Marvin $3300 5554 22/05/1995 05/22/1995

The standard sort by column. The column title can be clicked to sort data up or down.

In details:

Object Class
Table uiGrid, table-bordered, table-striped, sortable
Sort icons Icons by the elcom Platform style: uiIconArrowUp, uiIconArrowDown

Status

Status Description
Standard column The title of this column is not used as an criterion for sorting.
Being sorted column The title of this column is used as an criterion for sorting. There is Up or Down icon that represents for the sorting direction.

Rules

SR-01 No sort by column in case of 0 or 1 data row.
SR-02 The Up or Down icon displays at the sorted column.
SR-03 The column label matches with the data column.
SR-04 The length of column label is limited to 20 characters.