feat(data-table): add tableHeaderTranslateWithId prop

The `tableHeaderTranslateWithId` prop on DataTable forwards
custom translations to TableHeader for aria-labels on sort icons,
enabling localization.

Author: metonym

COMPONENT_INDEX.md

@@ -3428,6 +3428,18 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "tableHeaderTranslateWithId",
+          "kind": "let",
+          "description": "Override the default table header translation ids",
+          "type": "(id: import(\"./TableHeader.svelte\").TableHeaderTranslationId) => string",
+          "value": "undefined",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],

docs/src/COMPONENT_API.json

@@ -181,6 +181,12 @@
   /** Set to `number` to set current page */
   export let page = 0;
 
+  /**
+   * Override the default table header translation ids
+   * @type {(id: import("./TableHeader.svelte").TableHeaderTranslationId) => string}
+   */
+  export let tableHeaderTranslateWithId = undefined;
+
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
   import InlineCheckbox from "../Checkbox/InlineCheckbox.svelte";
@@ -482,6 +488,9 @@
               sortable={sortable && header.sort !== false}
               sortDirection={sortKey === header.key ? sortDirection : "none"}
               active={sortKey === header.key}
+              {...(tableHeaderTranslateWithId
+                ? { translateWithId: tableHeaderTranslateWithId }
+                : {})}
               on:click={(e) => {
                 dispatch("click", { header });
 

src/DataTable/DataTable.svelte

@@ -70,6 +70,8 @@
   export let expandedRowIds: string[] = [];
   export let pageSize = 0;
   export let page = 0;
+  export let tableHeaderTranslateWithId: ((id: string) => string) | undefined =
+    undefined;
 </script>
 
 <DataTable
@@ -93,6 +95,7 @@
   {expandedRowIds}
   {pageSize}
   {page}
+  {tableHeaderTranslateWithId}
   on:click={(e) => {
     console.log("click", e.detail);
   }}

tests/DataTable/DataTable.test.svelte

@@ -1165,6 +1165,94 @@ describe("DataTable", () => {
     expect(detail).toHaveProperty("row");
   });
 
+  it("uses default table header translations", async () => {
+    render(DataTable, {
+      props: {
+        sortable: true,
+        headers,
+        rows,
+      },
+    });
+
+    const nameHeader = screen.getByText("Name");
+    const headerButton = nameHeader.closest("button");
+    assert(headerButton);
+
+    const sortIcon = headerButton.querySelector(".bx--table-sort__icon");
+    assert(sortIcon);
+    expect(sortIcon).toHaveAttribute(
+      "aria-label",
+      "Sort rows by this header in ascending order",
+    );
+  });
+
+  it("applies custom table header translations", async () => {
+    const customTranslator = (id: string) => {
+      const translations: Record<string, string> = {
+        columnSortAscending: "Trier par ordre croissant",
+        columnSortDescending: "Trier par ordre décroissant",
+      };
+      return translations[id] || id;
+    };
+
+    render(DataTable, {
+      props: {
+        sortable: true,
+        headers,
+        rows,
+        tableHeaderTranslateWithId: customTranslator,
+      },
+    });
+
+    const nameHeader = screen.getByText("Name");
+    const headerButton = nameHeader.closest("button");
+    assert(headerButton);
+
+    const sortIcon = headerButton.querySelector(".bx--table-sort__icon");
+    assert(sortIcon);
+    expect(sortIcon).toHaveAttribute("aria-label", "Trier par ordre croissant");
+
+    await user.click(nameHeader);
+    expect(sortIcon).toHaveAttribute(
+      "aria-label",
+      "Trier par ordre décroissant",
+    );
+  });
+
+  it("updates aria-label based on sort state", async () => {
+    render(DataTable, {
+      props: {
+        sortable: true,
+        headers,
+        rows,
+      },
+    });
+
+    const nameHeader = screen.getByText("Name");
+    const headerButton = nameHeader.closest("button");
+    assert(headerButton);
+
+    const sortIcon = headerButton.querySelector(".bx--table-sort__icon");
+    assert(sortIcon);
+
+    expect(sortIcon).toHaveAttribute(
+      "aria-label",
+      "Sort rows by this header in ascending order",
+    );
+
+    await user.click(nameHeader);
+    expect(sortIcon).toHaveAttribute(
+      "aria-label",
+      "Sort rows by this header in descending order",
+    );
+
+    await user.click(nameHeader);
+    expect(sortIcon).toHaveAttribute(
+      "aria-label",
+      "Sort rows by this header in ascending order",
+    );
+  });
+
   // Regression test for issue https://github.com/carbon-design-system/carbon-components-svelte/issues/2344
   describe("TypeScript event type definitions", () => {
     it("click:row event type includes target and currentTarget", () => {

tests/DataTable/DataTable.test.ts

@@ -201,6 +201,14 @@ type $Props<Row> = {
    */
   page?: number;
 
+  /**
+   * Override the default table header translation ids
+   * @default undefined
+   */
+  tableHeaderTranslateWithId?: (
+    id: import("./TableHeader.svelte").TableHeaderTranslationId,
+  ) => string;
+
   [key: `data-${string}`]: any;
 };