Summary

User story

As a user, I want to be able to sort the rows of a table in a particular order

As a user, I want a powerful way to control the sort order of a table

API

For this patch, 2 new props will be added to the Table component:

• sort: This prop, bound via v-model will be an object with string keys and "asc" or "desc" values
• allowMultiSort: This boolean prop can be used to indicate that more than one column can be sorted at a time. Otherwise, when one column is sorted, the other columns will become unsorted.

The TableColumn type will be updated with a new boolean property, sortable (or allowSort?) When true, the sort icon will display in this column's <th> in the <thead>.

Sorting

The parent component must handle sorting the data and providing the rows in the right order. The Table component will simply take in the sort prop, let the component know when the user changes the sort order, and show the appropriate sort icon.

Sort icon behavior

The sort icon behaves in the following way:

• When a column is sortable but unsorted, the full icon shows
• When a column is sorted ascending, only the up arrow shows
• When a column is sorted descending, only the down arrow shows
• When a user clicks a column to sort it, the column becomes sorted ascending
• When they click again, the column becomes sorted descending
• When they click a third time, the column becomes unsorted
• When multi-sort is off, sorting a column unsorts all others
• When multi-sort is on, sorting a column does not unsort the others

Sortable <th> elements should have the following interactive states:

Accessibility considerations

The following attributes should be used to make sorting accessible to users of assistive technology:

• aria-sort to communicate the sorting method
• role="columnheader" (elements with this role need to be nested as descendants of elements with role="row")
• scope="col"
• the sort icons should be removed from the accessibility tree to avoid redundancies using`aria-hidden="true"`

Not all screen readers support aria-sort, so we should find an alternative method to communicate the sorting status and options. I found examples where indications are provided by including buttons in the header and using their labels (ARIA Sortable table example) or by using divs (Carbon's Sorting variant of Table). The recommended label copy is "Sort rows by [column label] in ["descending" or "ascending"] order."

Manual accessibility testing will be performed to evaluate compliance.

Demos and testing

New demos should be added to demonstrate the different types of sorting, and ways that a parent component might handle it (actually sorting the data, or making a new API call).

Unit tests should be added to cover sort functionality.

---

Acceptance criteria

• The Table component has new props for sort and allowMultiSort
• The TableColumn type has a new optional boolean property, sortable (or allowSort)
• The sort icon is implemented in Table and click events are handled, informing the parent component when sort changes
• Demos are added to the sandbox page
• Unit tests cover the new behavior