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

apps/prs/angular/src/app/app.component.html

@@ -84,6 +84,7 @@
           <a href="/features/3306">3306</a>
           <a href="/features/3370">3370</a>
           <a href="/features/v2-icons">v2 header icons</a>
+          <a href="/features/3344">3344 Table Multi-Sort</a>
           <a href="/features/3396">3396 Text heading-2xs size</a>
           <a href="/features/3407-skip-on-focus-tab">3407 Skip Focus on Tab</a>
           <a href="/features/3407-stack-on-mobile">3407 Tabs Orientation</a>

apps/prs/angular/src/app/app.routes.ts

@@ -64,6 +64,7 @@ import { Feat2722Component } from "../routes/features/feat2722/feat2722.componen
 import { Feat2730Component } from "../routes/features/feat2730/feat2730.component";
 import { Feat2829Component } from "../routes/features/feat2829/feat2829.component";
 import { Feat3102Component } from "../routes/features/feat3102/feat3102.component";
+import { Feat3344Component } from "../routes/features/feat3344/feat3344.component";
 import { Feat3137Component } from "../routes/features/feat3137/feat3137.component";
 import { Feat3241Component } from "../routes/features/feat3241/feat3241.component";
 import { Feat3306Component } from "../routes/features/feat3306/feat3306.component";
@@ -141,6 +142,7 @@ export const appRoutes: Route[] = [
   { path: "features/3137", component: Feat3137Component },
   { path: "features/3241", component: Feat3241Component },
   { path: "features/v2-icons", component: FeatV2IconsComponent },
+  { path: "features/3344", component: Feat3344Component },
   { path: "features/3137", component: Feat3137Component },
   { path: "features/3306", component: Feat3306Component },
   { path: "features/3370", component: Feat3370Component },

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

@@ -0,0 +1,104 @@
+<h1>PR 4: Table & TableSortHeader V2</h1>
+
+<goab-block>
+  <goab-details heading="Changes in this PR">
+    <p>
+      <strong>TableSortHeader:</strong><br />
+      - Always-visible sort icon (chevron-expand when unsorted)<br />
+      - Arrow-up/arrow-down for sorted states<br />
+      - sortOrder prop shows "1", "2" for multi-column sort<br />
+      <br />
+      <strong>Table:</strong><br />
+      - sortMode="single" (default) or "multi" (up to 2 columns)<br />
+      - Initial sort declared on headers via direction + sortOrder<br />
+      - onSort callback with sortBy, sortDir, and sorts array
+    </p>
+  </goab-details>
+</goab-block>
+
+<goab-divider mt="l" mb="l"></goab-divider>
+
+<h2>Test 1: Single-Column Sort (Default)</h2>
+<p>Click column headers to sort. Only one column sorts at a time (default behavior).</p>
+<p><small>Current sort: {{ formatSorts(currentSorts) }}</small></p>
+
+<goab-table mt="m" (onSort)="onSingleSortChange($event)">
+  <thead>
+    <tr>
+      <th>
+        <goab-table-sort-header name="name">Name</goab-table-sort-header>
+      </th>
+      <th>
+        <goab-table-sort-header name="department">Department</goab-table-sort-header>
+      </th>
+      <th class="goa-table-cell--numeric">
+        <goab-table-sort-header name="salary">Salary</goab-table-sort-header>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let row of data">
+      <td>{{ row.name }}</td>
+      <td>{{ row.department }}</td>
+      <td class="goa-table-cell--numeric">{{ formatCurrency(row.salary) }}</td>
+    </tr>
+  </tbody>
+</goab-table>
+
+<goab-divider mt="l" mb="l"></goab-divider>
+
+<h2>Test 2: Multi-Column Sort</h2>
+<p>With sortMode="multi", click columns to add them to sort order (up to 2).</p>
+<p><small>Current sort: {{ formatSorts(multiSorts) }}</small></p>
+
+<goab-table mt="m" sortMode="multi" (onSort)="onMultiSortChange($event)">
+  <thead>
+    <tr>
+      <th>
+        <goab-table-sort-header name="name">Name</goab-table-sort-header>
+      </th>
+      <th>
+        <goab-table-sort-header name="department">Department</goab-table-sort-header>
+      </th>
+      <th class="goa-table-cell--numeric">
+        <goab-table-sort-header name="salary">Salary</goab-table-sort-header>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let row of data">
+      <td>{{ row.name }}</td>
+      <td>{{ row.department }}</td>
+      <td class="goa-table-cell--numeric">{{ formatCurrency(row.salary) }}</td>
+    </tr>
+  </tbody>
+</goab-table>
+
+<goab-divider mt="l" mb="l"></goab-divider>
+
+<h2>Test 3: Multi Initial Sort (declarative)</h2>
+<p>Two initial sorts declared on headers: Department ascending (primary), Salary descending (secondary).
+Use direction + sortOrder on each header to set priority.</p>
+
+<goab-table mt="m" sortMode="multi">
+  <thead>
+    <tr>
+      <th>
+        <goab-table-sort-header name="name">Name</goab-table-sort-header>
+      </th>
+      <th>
+        <goab-table-sort-header name="department" direction="asc" [sortOrder]="1">Department</goab-table-sort-header>
+      </th>
+      <th class="goa-table-cell--numeric">
+        <goab-table-sort-header name="salary" direction="desc" [sortOrder]="2">Salary</goab-table-sort-header>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let row of data">
+      <td>{{ row.name }}</td>
+      <td>{{ row.department }}</td>
+      <td class="goa-table-cell--numeric">{{ formatCurrency(row.salary) }}</td>
+    </tr>
+  </tbody>
+</goab-table>

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

@@ -0,0 +1,55 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+  GoabBlock,
+  GoabText,
+  GoabDivider,
+  GoabDetails,
+  GoabTable,
+  GoabTableSortHeader,
+} from "@abgov/angular-components";
+import { GoabTableOnSortDetail, GoabTableSortEntry } from "@abgov/ui-components-common";
+
+@Component({
+  standalone: true,
+  selector: "abgov-feat3344",
+  templateUrl: "./feat3344.component.html",
+  imports: [
+    CommonModule,
+    GoabBlock,
+    GoabText,
+    GoabDivider,
+    GoabDetails,
+    GoabTable,
+    GoabTableSortHeader,
+  ],
+})
+export class Feat3344Component {
+  currentSorts: GoabTableSortEntry[] = [];
+  multiSorts: GoabTableSortEntry[] = [];
+
+  data = [
+    { id: 1, name: "Alice Johnson", department: "Engineering", salary: 95000 },
+    { id: 2, name: "Bob Smith", department: "Marketing", salary: 72000 },
+    { id: 3, name: "Carol Williams", department: "Engineering", salary: 105000 },
+    { id: 4, name: "David Brown", department: "Sales", salary: 68000 },
+    { id: 5, name: "Eve Davis", department: "Marketing", salary: 78000 },
+  ];
+
+  formatSorts(sorts: GoabTableSortEntry[]): string {
+    if (sorts.length === 0) return "None";
+    return sorts.map((s, i) => `${i + 1}. ${s.column} (${s.direction})`).join(", ");
+  }
+
+  onSingleSortChange(detail: GoabTableOnSortDetail) {
+    this.currentSorts = detail.sorts;
+  }
+
+  onMultiSortChange(detail: GoabTableOnSortDetail) {
+    this.multiSorts = detail.sorts;
+  }
+
+  formatCurrency(value: number): string {
+    return "$" + value.toLocaleString();
+  }
+}

apps/prs/react/src/app/app.tsx

@@ -92,11 +92,12 @@ export function App() {
               <Link to="/features/3137">3137 Work Side Menu Group</Link>
               <Link to="/features/3241">3241 V2 Experimental Wrappers</Link>
               <Link to="/features/v2-icons">v2 header icons</Link>
-              <Link to="/features/3407-skip-on-focus-tab">3407 Skip Focus on Tab</Link>
-              <Link to="/features/3407-stack-on-mobile">3407 Tabs Orientation</Link>
+              <Link to="/features/3344">3344 Table Multi-Sort</Link>
               <Link to="/features/3306">3306 Custom slug value for tabs</Link>
               <Link to="/features/3370">3370 Clear calendar day selection</Link>
               <Link to="/features/3396">3396 Text heading-2xs size</Link>
+              <Link to="/features/3407-skip-on-focus-tab">3407 Skip Focus on Tab</Link>
+              <Link to="/features/3407-stack-on-mobile">3407 Tabs Orientation</Link>
             </GoabSideMenuGroup>
             <GoabSideMenuGroup heading="Everything">
               <Link to="/everything">A</Link>

apps/prs/react/src/main.tsx

@@ -72,6 +72,7 @@ import { Feat3241Route } from "./routes/features/feat3241";
 import { FeatV2IconsRoute } from "./routes/features/featV2Icons";
 import { Feat3407SkipOnFocusTabRoute } from "./routes/features/feat3407SkipOnFocusTab";
 import { Feat3407StackOnMobileRoute } from "./routes/features/feat3407StackOnMobile";
+import { Feat3344Route } from "./routes/features/feat3344";
 import { Feat3137Route } from "./routes/features/feat3137";
 import { Feat3306Route } from "./routes/features/feat3306";
 import { Feat2469Route } from "./routes/features/feat2469";
@@ -155,11 +156,19 @@ root.render(
           <Route path="features/3137" element={<Feat3137Route />} />
           <Route path="features/3241" element={<Feat3241Route />} />
           <Route path="features/v2-icons" element={<FeatV2IconsRoute />} />
-          <Route path="features/3407-skip-on-focus-tab" element={<Feat3407SkipOnFocusTabRoute />} />
-          <Route path="features/3407-stack-on-mobile" element={<Feat3407StackOnMobileRoute />} />
+          <Route path="features/3344" element={<Feat3344Route />} />
+          <Route path="features/3137" element={<Feat3137Route />} />
           <Route path="features/3306" element={<Feat3306Route />} />
           <Route path="features/3370" element={<Feat3370Route />} />
           <Route path="features/3396" element={<Feat3396Route />} />
+          <Route
+            path="features/3407-skip-on-focus-tab"
+            element={<Feat3407SkipOnFocusTabRoute />}
+          />
+          <Route
+            path="features/3407-stack-on-mobile"
+            element={<Feat3407StackOnMobileRoute />}
+          />
         </Route>
       </Routes>
     </BrowserRouter>