Sorting Specification

Owned by

Zdravko Kolev - Phoenix

Requires approval from

Peer Developer Name | Date:
Stefan Ivanov | Date:

Signed off by

Radoslav Mirchev | Date:
Radoslav Karatoaivanov | Date:

Revision history

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

1. Overview

Objectives

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

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

...

2. User Stories

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

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)