Grid Sorting
Use Grid Sorting to indicate the ordering of records in ascending and descending order according to the values within a given column. The Grid Sorting is visually identical to the Ignite UI for Angular Grid Sorting Feature
Grid Sorting Demo
Header Cell Feature
In order to indicate a column as sortable in Sketch use either the Feature Left
or Feature Right
overrides and set it to Sorting
. Then you can set the Sorting State
to Ascending, Descending, or Unsorted to indicate the sort order. In Figma, to indicate a column as sortable, use either the Feature Left
or Feature Right
component instance, located inside the Grid Header Cell layer, and set the Type
property to Ascending, Descending, or Unsorted to indicate the sort order. In Adobe XD you have to take a slightly different path by unhiding either the Feature Left
or Feature Right
group and then leaving just the Sorting
layer inside it, which should also be unhidden if necessary. Then via the available Component States
, you will be able to switch the state to Ascending
or Descending
. Of course, you would probably want to manipulate the column values to reflect the selected ordering.
Additional Resources
Related topics:
Our community is active and always welcoming to new ideas.