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 via a sort icon in the grid header. It is also possible to sort the grid by more than one column, where 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 be able to mark columns as sortable/not sortable, so that I have control over the columns that end-users may sort.
Story 2: As a developer, I want to be able to sort columns in ascending/descending order programmatically so that I can define an initial state of the grid.
Story 3: 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 know which columns are currently sorted/unsorted so that I can have a clear understanding of the current state of the grid.
Story 3: 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 at a glance of the order in a particular column.
Story 4: As an end-user, I want to know the sequence in which columns have been sorted, when sorting spans more than one column 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

The display density does not affect the sorting indication, it respects the paddings defined otherwise in the header cell for the icons that appear.

In rare cases when a grid has many columns and sorting is applied on an arbitrary number of them, the indicator may need to be a two-digit number. Then, the background color of the numeral will result in part of the icon being cut off like below.

The following handoff defines the relationship and styling characteristics of the sorting indicator with respect to the sort icon and the grid header cell.

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)