feat(#3344): add multi-column sorting to Table and TableSortHeader

[twjeffery]

Summary

Adds built-in multi-column sorting to Table and TableSortHeader components.

• sortMode prop: "single" (default) or "multi" (up to 2 columns)
• initialSort prop: Pre-configure sort state
• onSortChange callback: Receives array of current sorts
• sortOrder prop on TableSortHeader: Shows "1", "2" priority badges
• Table manages sort state internally, headers update automatically
• New icons: chevron-expand (unsorted), arrow-up/arrow-down (sorted)
• V2 focus ring on icon only

Multi sort

Single sort

Test plan

• Visit React playground at /features/3344
• Test single-column sort (Test 1) - click headers, verify only one sorts at a time
• Test multi-column sort (Test 2) - click multiple headers, verify "1" and "2" badges appear
• Test initial sort (Test 3) - verify Department starts sorted
• Test V2 experimental wrappers (Test 4) - verify focus ring on icon only
• Visit Angular playground at /features/3344 and repeat tests

Closes #3344

[bdfranck]

The sorting interactions are looking good! I've left some comments that can be grouped into three categories:

1. Try to re-use and expand on existing variables and functions.
2. Avoid using JSON because it can lead to increased errors. Use Types instead.
3. Make sure that you're giving devs the data they need for their sort functions.

[bdfranck]

Using a JSON string here could introduce errors. We can take advantage of TypeScript's error prevention by using an array of SortEntries instead. Then we can remove _sorts as it will be redundant.

The checkbox list is a good reference. It uses an array of strings for keeping track of multiple selected values.

ui-components/libs/web-components/src/components/checkbox-list/CheckboxList.svelte

Lines 31 to 32 in 762d405

	/** Array of currently selected checkbox values. */
	export let value: string[] = [];

[vanessatran-ddi]

I agree vs the point that we shouldn' use json.
I think instead of using initialsort as a JSON string on the table (which is a new property), We could declare the initial sort state directly on each goa-table-sort-header (which we do nowadays)
For example:

<goa-table sortmode="multi">
... <goa-table-sort-header name="name" direction="asc" sortorder="1">Name</goa-table-sort-header>
... <goa-table-sort-header name="department" direction="desc" sortorder="2">Department</goa-table-sort-header>
...<goa-table-sort-header name="salary">Salary</goa-table-sort-header>
</goa-table>

So we only add a new property sortorder to the goa-table-sort-header. This approach will be consistent with how the old single-sort already worked. The table just scans headers onMount to build its internal sort state from direction + sortorder attribute.

[bdfranck]

You can remove this function when you switch to using an array of SortEntries for the sorts.

[vanessatran-ddi]

If we rely on GoabTableSortHeader then refer this comment #3409 (comment), we can keep this function to "scan" header and then initialize the table sort state.

[bdfranck]

There's an existing type that you can use. It's already imported into this component:

ui-components/libs/web-components/src/components/table/TableSortHeader.svelte

Lines 3 to 5 in 8e2a3aa

	<script context="module" lang="ts">
	export type GoATableSortDirection = "asc" | "desc" | "none";
	</script>

[bdfranck]

Instead of building a parallel function that does the same thing as onSort, why not expand onSort to support either a single item or an array?

GoabTableOnSortDetail[] | GoabTableOnSortDetail

This would allow you to add new functionality while preserving the original structure.

[bdfranck]

I noticed that this will send a "asc" or "desc" string for direction instead of 1 or -1. Is this intentional? Devs will need a number for their sort function like we have in our example:
https://design.alberta.ca/components/table#tab-1#table-with-sortable-columns

[bdfranck]

Let's avoid using JSON here too. The initial sort should be an array to reduce errors.

[vanessatran-ddi]

I tested and see there is a small shift in a column:
https://jam.dev/c/8bafde76-cd5d-4d17-8e1e-68912f31a9b1

I think we should add a hidden class for this .sort-order, for example:
<span class='sort-order' class:hidden={!sortorder || direction === 'none'>

Then we can make sure width:0 and margin:0 to prevent the shifting.

[netlify]

❌ Deploy Preview for goa-design-2 failed.

Name	Link
🔨 Latest commit	c82cfcf
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/699f5992ae49af0007477236