-
Notifications
You must be signed in to change notification settings - Fork 160
Sorting Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Zdravko Kolev - Phoenix
- Peer Developer Name | Date:
- Stefan Ivanov | Date:
- Radoslav Mirchev | Date:
- Radoslav Karatoaivanov | Date:
Version | User | Date | Notes |
---|---|---|---|
0.1 | Stefan Ivanov | 28.11.18 | Created Spec |
0.2 | Danail Marinov | 16.01.19 | Updated Spec |
0.3 | Danail Marinov | 17.01.19 | Updated Spec |
2 | Stefan Ivanov | 15.07.20 | Adding sort order indication |
The sorting functionality of the grid allows the user to define the order of records in the grid by sorting a column in ascending/descending order by clicking an icon in the grid header. It is also possible to sort the grid by more than one column when a numeric indication on the icon is used to show the order in which columns have been sorted prototype
Must-have before we can consider the feature a sprint candidate
...
Developer Stories
- Story 1: As a developer, I want to have a clear sorting indication displayed out of the box so that the columns on which sorting is/can be applied are obvious.
- Story 2: As a developer, I want to have ellipsis applied out of the box on the column name label when the column is too narrow and becomes sorted so that the sort icon is clearly visible.
End-user stories
- Story 1: As an end-user, I want to know on which columns I can apply sorting so that I can distinguish them from the rest.
- Story 2: As an end-user, I want to be able to distinguish whether ascending or descending order of the sorting is applied so that I have a clear understanding of the order defined by a particular column.
- Story 3: As an end-user, I want to know which columns are currently sorted/unsorted so that I can have a clear understanding of the current state of the grid.
- Story 4: As an end-user, I want to know the order in which columns are sorted so that I can have a clear understanding of the current state of the grid.
3.1. End-User Experience
If the column width is enough to display both full label and sorting arrow on hover/active, then:
- on hover is displayed an up arrow (indicating that the column is sortable) at gray.600 and the column label changes to gray.900. If we have filtering row inactive, the sorting action is triggered on click on the whole column header cell.
Filtering row is inactive, sorting is idle.
Filtering row is inactive, sorting is on hover.
On inactive filter row, on hover, the up/down arrow is at gray.600 and label is at gray.900
Filtering row is inactive, sorting is applied.
On inactive filter row, on applied sorting the up/down arrow is at secondary.500 and label is at gray.900
- If we have filtering row active, the sorting action is triggered on click only on the icon.
Filtering row is active, sorting is idle.
Filtering row is active, sorting is on hover.
On active filter row, on hover the up/down arrow is at gray.600 and label is at gray.900
Filtering row is active, sorting is applied.
On active filter row, on applied sorting the up/down arrow is at secondary.500 and label is at gray.900
If the width of the column is not enough to display the full column label and the sorting arrow, then:
- when sorting can be performed but is not applied, on hover state is displayed the column label partially plus a sorting up arrow (indicating that sorting can be applied); column label is at gray.900, up arrow is at gray.600
If Excel Style Filtering is also enabled for a sortable column, triggering the sorting from the ESF dialog will cause the sorting icon to reflect that and the indicator to show the sequence number accordingly prototype
3.2. Developer Experience
3.3. Globalization/Localization
Describe any special localization requirements such as the number of localizable strings, regional formats
3.4. Keyboard Navigation
Name | Description |
---|---|
Ctrl + Arrow up | sorts the column in ASC order (if already sorted in ASC order it unsorts the column) |
Ctrl + Arrow down | sorts the column in DSC order (if already sorted in ASC order it unsorts the column) |
3.5. API
Name | Description | Type | Default value | Valid values |
---|---|---|---|---|
Name | Description | Return type | Parameters |
---|---|---|---|
Name | Description | Cancelable | Parameters |
---|---|---|---|