Igniteui-angular: 💎 Grid - Sorting - styling on header cells

Created on 13 Jul 2018 · 5Comments · Source: IgniteUI/igniteui-angular

Description

To better fit Material Design guidelines and to improve user experience, several changes are proposed:

[ ] Change font color of a header cell on hover to grays 900
[x] Make the sorting arrow appear on hover on applicable header cells at 54% black.
[x] Make the active sorting arrow at primary 500
[ ] Rotate (animate) the active sorting arrow when changing its state
[ ] Change font color of a header cell when sorted to grays 900

grid-sorting-hover

enhancement general sorting low resolved styling 7.1.x

Source

SDinev

👍2

Most helpful comment

I recommend the following behavior for a sortable cell:

on hover (mouseover) everywhere on the whole header cell appears arrow icon which indicates that the column is sortable
sorting would be triggered only after clicking on the very icon in the right end of the cell

DaniMarinov on 13 Nov 2018

👍3

All 5 comments

Preview of hovering when the column header is longer and needs ellipsis. This behavior allows us to show more of the header text in a rest state, making the grid easier to read.

sorting-ellipsis

SDinev on 13 Jul 2018

@StefanIvanov @simeonoff Are we going to implement this? I am asking so I can start work on it.

desig9stein on 7 Nov 2018

@desig9stein let's discuss.

simeonoff on 12 Nov 2018

I recommend the following behavior for a sortable cell:

on hover (mouseover) everywhere on the whole header cell appears arrow icon which indicates that the column is sortable
sorting would be triggered only after clicking on the very icon in the right end of the cell

DaniMarinov on 13 Nov 2018

👍3

@DaniMarinov can you outline a brief Sorting Spec based on the issue