Sort
Sort
Sort enables users to quickly sort a view of objects by a single attribute. Sort is often displayed as a component of the Toolbar.
When the current data is displayed as a table with sortable columns, the sort widget should be hidden and user can sort columns by clicking on the column header. See Table View for more information.
Sort
-
Sort Selector: Contains a list of the possible attributes by which to sort. Objects may be sorted by any attribute, including properties that are not displayed in the current view. (e.g. attributes in hidden columns, or those that are not displayed in a tile). When the user opens this view, the default sort order should be shown selected in the list (for example,”Name”).
-
Sort Order Toggle: Sort can toggle between ascending and descending order. The icon on this button changes according to the order of the current sort. The default for sort is ascending order.
See available sort icons below and when they should be used.
| Icon | Class Name | Tooltip Text | Screenreader Text (aria-label) | Comments |
|---|---|---|---|---|
| fa-sort-alpha-asc | Sort A to Z | Sorted A to Z. Toggle to sort Z to A. | When data to be sorted is alphabetical, use this icon to communicate the sort order. | |
| fa-sort-alpha-desc | Sort Z to A | Sorted Z to A. Toggle to sort A to Z. | See comments in previous row. | |
| fa-sort-numeric-asc | Sort 1 to 9 | Sorted 1 to 9. Toggle to sort 9 to 1. | When data to be sorted is numeric, use this icon to communicate numerical sort order. | |
| fa-sort-numeric-desc | Sort 9 to 1 | Sorted 9 to 1. Toggle to sort 1 to 9. | See comments in previous row. | |
| pficon-sort-common-asc | Sort small to large value | Sorted small to large value. Toggle to sort large to small value. | Use this icon to communicate sort order for other data types, such as sort by size, sort by date, sort by distance, etc. | |
| pficon-sort-common-desc | Sort large to small value | Sorted large to small value. Toggle to sort small to large value. | See comments in previous row. |
PatternFly Core Example Not Available
There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.
Visit the Contributing to PatternFly documentation to learn how to contribute the code.