Skip to main content link. Accesskey S

Sorting

Sorting comes in a few different flavors. The table headers can be sortable. Psuedo table headers (a list at the top of the table) can be used instead. When there are too many sort options, the active sort shows up as a link and the rest of the options are housed in a more sorts drop down. The active sort can show an optional directional indicator.

Directionality:

More Sorts

Trying to click on the More Sorts link will trigger errors on the page. Please see the example page instead.

Classes

  • lotusSort - the class that goes on the wrapper div of the component.
  • lotusInlinelist - the sort options are created using the lotusInlinelist general class.
  • lotusFirst - goes on the first two items in the list. The "sort by" text and the first sort term.
  • lotusMoreSorts - goes on the last link in the list, which says "more sorts"
  • lotusActiveSort - this class goes on whatever sort link is the current sort
  • lotusAscending - this is an additional class on the current sort, if it is sorted ascending
  • lotusDescending - this is an additional class on the current sort, if it is sorted descending.

Basic Implementation

Create a wrapper div with the class lotusSort

Use an inline list for the sort links and the "Sort By" term.

Use the lotusActiveSort and lotusAscending or lotusDescending classes for the current sort option.

See the example pages for a demonstration of the sort behavior (only shows the behavior of the sort control, doesn't actually sort the data).

Variations

If you have a lot of sort terms, list one of them and put the rest under the more sorts link, in an action menu.

Examples

Sample HTML

Sample HTML - Sort More

CSS (sort.css)

Theme CSS (sortTheme.css)

This component was created for the summary/details view of our data, which doesn't always contain multiple columns. It also supports sorting in a grid view where you can sort by data not displayed in the grid.

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.