sorting

Sorting

The sort menu allows the user to adjust the sort order of data in a list.

<script type="module">
  import '@brightspace-ui/core/components/sorting/sort.js';
  import '@brightspace-ui/core/components/sorting/sort-item.js';
</script>
<d2l-sort>
	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
</d2l-sort>

Best Practices

• Make the Sort the right-most component in a group of Search, Filters & Sort controls
• Carefully consider the user’s workflow before adding a reversible order to the sort. Most sort options do not need to be reversible.
• Write Sort option labels in Title Case
• Make Sort labels specific rather than general — “Sort: Course Title” is better than “Sort: Alphabetical”.

• Don’t include an excessive number of sorting options — every additional option increases the cognitive load on the user when making a decision
• Don’t make phrasings too similar — the first word of the option should be unique (“Last Accessed”, “Enrolment Date”, “Date Pinned”)
• Don’t use when sorting table data. If the data is presented with table column headers, use Sortable Column Buttons to apply sorting.

Sort [d2l-sort]

The <d2l-sort> element is a required wrapper around multiple <d2l-sort-item> elements.

<script type="module">
  import '@brightspace-ui/core/components/sorting/sort.js';
  import '@brightspace-ui/core/components/sorting/sort-item.js';
</script>
<d2l-sort>
	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
</d2l-sort>

Properties

Property	Type	Description
disabled	Boolean	Disables the sort

Events

• d2l-sort-change: dispatched when the selected sort item changes

Sort Item [d2l-sort-item]

The <d2l-sort-item> element represents an option within its parent <d2l-sort>.

<script type="module">
  import '@brightspace-ui/core/components/sorting/sort.js';
  import '@brightspace-ui/core/components/sorting/sort-item.js';
</script>
<d2l-sort opened>
	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
</d2l-sort>

Properties

Property	Type	Description
text	String, required	Option text
value	String, required	Value of the option
selected	Boolean	Whether this is the selected sort option