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.
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.