## 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:
{F42619909}
| [[ https://www.figma.com/file/pTQZX5MgXUXnYHybJQk7zo/Table-component?type=design&node-id=2575-48176&mode=design&t=YXeI24zcmLROoYJo-0 | Component spec sheet ]] |
### 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 ([[ https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/ | ARIA Sortable table example ]]) or by using divs ([[ https://carbondesignsystem.com/components/data-table/usage/ | 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`
- [] 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