feat(#3344): add multi-column sorting to Table and TableSortHeader by twjeffery · Pull Request #3409 · GovAlta/ui-components

twjeffery · 2026-02-10T01:12:04Z

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:

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

libs/web-components/src/components/table/Table.svelte

libs/react-components/src/lib/table/table.tsx

libs/react-components/src/experimental/table/table.tsx

libs/angular-components/src/experimental/table/table.ts

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

apps/prs/angular/src/routes/features/feat3344/feat3344.component.ts

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

netlify · 2026-02-24T00:27:46Z

✅ Deploy Preview for goa-design-2 ready!

Name	Link
🔨 Latest commit	`0543166`
🔍 Latest deploy log	https://app.netlify.com/projects/goa-design-2/deploys/69ac4732e9b981000842b79e
😎 Deploy Preview	https://deploy-preview-3409--goa-design-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

willcodeforcoffee

👍 Looks good!

bdfranck

I looked at the latest changes...

✅ I see the JSON was removed
✅ The PR playground examples work as expected in Angular and React
✅ All tests pass

Looks good to me! 👍

libs/web-components/src/components/table/Table.svelte

chrisolsen · 2026-03-03T16:13:04Z

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

+  /** @internal Design system version for styling. */
+  export let version: "1" | "2" = "1";
+  /** Sort order number for multi-column sort display ("1", "2", etc). */
+  export let sortOrder: number = 0;


Can this be any number? Or just 0 | 1 | 2?

In practice just 0, 1, or 2. _maxSorts is 2, and the Table sets this directly on headers. 0 means not actively sorted (no sort showing). It's using a number since it's internally managed, not something a dev sets by hand.

If if it can only be a 0, 1 or 2, then the type should reflect that.

@chrisolsen I updated sortOrder type to 0 | 1 | 2 in the Svelte component (internal). Angular and React wrappers still need to pass 1|2.

chrisolsen · 2026-03-03T18:01:55Z

libs/web-components/src/components/table/Table.svelte

-
-        if (sortBy && sortDir !== 0) {
-          dispatch(heading, { sortBy, sortDir });
+  function initializeSorts() {


Is there a reason this function name was changed? This new name is rather vague to what it does.

Looking at what initializeSorts was actually doing:

Reading initial direction/sortOrder from registered headers

Attaching click handlers to headers

Updating header attributes

Dispatching the initial sort event

That seems like a lot for one function, and what I understand is that mixing handler attachment with state building meant listeners could stack if headers registered at different times.

It's now split into: attachClickHandlers, buildInitialSortState, with a bindAndInitialize orchestrator. Listener attachment is guarded so it only runs once even if headers register at different times. Also split handleSortClick into handleSingleSort/handleMultiSort per your earlier comment.

chrisolsen · 2026-03-03T18:06:22Z

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

+
+      dispatch<GoATableSortHeaderProps>(
+        _rootEl,
+        "table-sort-header:mounted",
+        { el: host, name, direction, sortOrder },
+        { bubbles: true, timeout: 10 },
+      );
    }


What is the reason for adding the dispatch call? Since all the props are reflected all the values are accessible via the attributes.

That was added in Vanessa's refactor. I think it's a registration pattern so the Table doesn't need to query the DOM for headers, but @vanessatran-ddi can probably speak to the reasoning better than I can.

Let me remove it, at first I think query all attributes will not work, but I try local and it seems working well, I will update the code.

chrisolsen · 2026-03-03T18:10:05Z

libs/web-components/src/components/table/Table.svelte

+
+    // Warn when multi-mode headers have initial direction but missing sortOrder
+    if (sortMode === "multi" && entries.length > 1) {
+      const missing = entries.filter((e) => !e.order);


Couple things

The var is called missing, which implies that the order may be null, but it's defined as a number with a default value of 0, so it's not missing, but rather just not set. (This is minor, but it is a little confusing)

I am confused why a having a header with a sort-order value of 0 is bad.

Two changes here:

Renamed missing to withoutSortOrder and changed the check to e.order === 0 to be explicit.

sort-order="0" isn't bad on its own. The warning only fires when multiple headers have initial direction set in multi mode but no sort-order to define priority. Without it the table falls back to DOM order, which might not match what was intended. Reworded the warning to try to explain that better.

libs/web-components/src/components/table/Table.svelte

chrisolsen · 2026-03-03T18:22:50Z

libs/web-components/src/components/table/Table.svelte

+      {
+        sortBy: firstSort?.column ?? "",
+        sortDir: firstSort ? (firstSort.direction === "asc" ? 1 : -1) : 0,
+        sorts: _sorts,


I think it would be cleaner if there was different events for the different sort types.

The _sort event already exists on dev with { sortBy, sortDir }. This extends it with an optional sorts array for multi-mode. Single-sort consumers get the same detail they always did.

Splitting into separate events would mean separate wrapper props (onSort + onMultiSort), and if a team moves from single to multi sort they'd need to swap out their event handler too. Keeping it as one event means existing implementations don't break.

But in the way things are done now every event has some null values and some not. So it isn't clear to them, without reading the docs, what is what.

Keeping it as one event means existing implementations don't break.

That doesn't make sense. You would keep the initial event handler and add a new one, named appropriately.

Hi @chrisolsen , the web component now dispatches _sort({sortBy, sortDir}) and _multisort({sort:[]}). Each event has a clean and dedicated detail type with no nullable fields. Both angular and react wrappers expose onSort like now and onMultiSort accordingly.

chrisolsen

Just one more small thing, then I am good merging it. @bdfranck @willcodeforcoffee do you guys need to re-review?

chrisolsen · 2026-03-06T22:24:27Z

libs/web-components/src/components/table/Table.svelte

  let _isTableRoot: boolean = false;
+  let _sorts: SortEntry[] = [];
+  let _headings: NodeListOf<Element> | undefined;
+  const _maxSorts = 2;


For clarity, since this is a const value this should be renamed to MAX_SORTS

Yes I rename this.

willcodeforcoffee

Testing works, looks good!
Still! 😉 😆

chrisolsen · 2026-03-07T16:11:37Z

🎉 This PR is included in version 1.41.0-dev.15 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-07T16:11:59Z

🎉 This PR is included in version 1.11.0-dev.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-07T16:13:47Z

🎉 This PR is included in version 6.11.0-dev.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

chrisolsen · 2026-03-07T16:14:05Z

🎉 This PR is included in version 4.11.0-dev.11 🎉

The release is available on:

Your semantic-release bot 📦🚀

twjeffery force-pushed the tom/table-fixes branch 3 times, most recently from c1514d7 to 7097784 Compare February 10, 2026 01:49

twjeffery requested a review from vanessatran-ddi February 10, 2026 01:56

bdfranck reviewed Feb 10, 2026

View reviewed changes

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

libs/web-components/src/components/table/TableSortHeader.svelte Show resolved Hide resolved

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

apps/prs/angular/src/routes/features/feat3344/feat3344.component.ts Outdated Show resolved Hide resolved

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

libs/web-components/src/components/table/TableSortHeader.svelte Outdated Show resolved Hide resolved

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

libs/web-components/src/components/table/TableSortHeader.svelte Show resolved Hide resolved

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

libs/web-components/src/components/table/TableSortHeader.svelte Outdated Show resolved Hide resolved

vanessatran-ddi reviewed Feb 12, 2026

View reviewed changes

libs/web-components/src/components/table/TableSortHeader.svelte Outdated Show resolved Hide resolved

vanessatran-ddi marked this pull request as draft February 13, 2026 01:18

vanessatran-ddi assigned twjeffery and vanessatran-ddi Feb 19, 2026

vanessatran-ddi force-pushed the tom/table-fixes branch from 7097784 to 48f879a Compare February 24, 2026 00:27

vanessatran-ddi force-pushed the tom/table-fixes branch 3 times, most recently from 91d0a01 to fa361f7 Compare February 27, 2026 01:05

vanessatran-ddi requested review from bdfranck, chrisolsen, vanessatran-ddi and willcodeforcoffee and removed request for vanessatran-ddi February 27, 2026 01:06

vanessatran-ddi marked this pull request as ready for review February 27, 2026 01:06

willcodeforcoffee approved these changes Feb 27, 2026

View reviewed changes

bdfranck approved these changes Feb 27, 2026

View reviewed changes

chrisolsen reviewed Mar 3, 2026

View reviewed changes

vanessatran-ddi force-pushed the tom/table-fixes branch 2 times, most recently from e56b58f to fd2d258 Compare March 6, 2026 20:32

vanessatran-ddi force-pushed the tom/table-fixes branch from df20e4f to 0c4d09e Compare March 6, 2026 21:16

vanessatran-ddi requested a review from chrisolsen March 6, 2026 21:19

chrisolsen reviewed Mar 6, 2026

View reviewed changes

vanessatran-ddi force-pushed the tom/table-fixes branch 2 times, most recently from d94f6fd to 4fb6b81 Compare March 6, 2026 23:06

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

289510b

vanessatran-ddi force-pushed the tom/table-fixes branch from 4fb6b81 to 289510b Compare March 6, 2026 23:08

vanessatran-ddi requested review from bdfranck and willcodeforcoffee March 6, 2026 23:09

willcodeforcoffee approved these changes Mar 6, 2026

View reviewed changes

Merge branch 'dev' into tom/table-fixes

0543166

chrisolsen merged commit 6a3d871 into dev Mar 7, 2026
8 checks passed

chrisolsen deleted the tom/table-fixes branch March 7, 2026 16:06

chrisolsen added the released on @dev label Mar 7, 2026

Conversation

twjeffery commented Feb 10, 2026 • edited by vanessatran-ddi Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Multi sort

Single sort

Test plan

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for goa-design-2 ready!

Uh oh!

willcodeforcoffee left a comment

Choose a reason for hiding this comment

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrisolsen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

willcodeforcoffee left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

chrisolsen commented Mar 7, 2026

Uh oh!

chrisolsen commented Mar 7, 2026

twjeffery commented Feb 10, 2026 •

edited by vanessatran-ddi

Loading

netlify bot commented Feb 24, 2026 •

edited

Loading