diff --git a/profiles/w3c.js b/profiles/w3c.js
index cdf270af71..a9285a3844 100644
--- a/profiles/w3c.js
+++ b/profiles/w3c.js
@@ -61,6 +61,7 @@ const modules = [
   import("../src/core/data-type.js"),
   import("../src/core/anchor-expander.js"),
   import("../src/core/dfn-panel.js"),
+  import("../src/core/sortable-table.js"),
   import("../src/core/custom-elements/index.js"),
   import("../src/core/web-monetization.js"),
   import("../src/core/dfn-contract.js"),
diff --git a/src/core/sortable-table.js b/src/core/sortable-table.js
new file mode 100644
index 0000000000..62e3205f89
--- /dev/null
+++ b/src/core/sortable-table.js
@@ -0,0 +1,28 @@
+// @ts-check
+import css from "../styles/sortable-table.css.js";
+import { fetchBase } from "./text-loader.js";
+
+export const name = "core/sortable-table";
+
+export async function run() {
+  if (!document.querySelector("table.sortable")) {
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.textContent = css;
+  document.head.insertBefore(style, document.querySelector("link"));
+
+  const script = document.createElement("script");
+  script.id = "respec-sortable-table";
+  script.textContent = await loadScript();
+  document.body.append(script);
+}
+
+async function loadScript() {
+  try {
+    return (await import("text!./sortable-table.runtime.js")).default;
+  } catch {
+    return fetchBase("./src/core/sortable-table.runtime.js");
+  }
+}
diff --git a/src/core/sortable-table.runtime.js b/src/core/sortable-table.runtime.js
new file mode 100644
index 0000000000..07f7942a2c
--- /dev/null
+++ b/src/core/sortable-table.runtime.js
@@ -0,0 +1,157 @@
+// @ts-check
+if (document.respec) {
+  document.respec.ready.then(setupSortableTable);
+} else {
+  setupSortableTable();
+}
+
+function setupSortableTable() {
+  const ASC = "ascending";
+  const DESC = "descending";
+
+  /** @type {Record<string, "ascending" | "descending" | null>} */
+  const NEXT_DIR = { [ASC]: DESC, [DESC]: null };
+
+  /** @type {WeakMap<HTMLTableElement, WeakMap<HTMLTableCellElement, "ascending" | "descending">>} */
+  const STATE = new WeakMap();
+
+  /**
+   * @param {HTMLTableCellElement} th
+   * @param {"ascending" | "descending" | null} dir
+   */
+  const updateButton = (th, dir) => {
+    // Cache original label before button text is appended.
+    if (!th.dataset.label) {
+      th.dataset.label = th.textContent.trim();
+    }
+
+    let button = th.querySelector("button");
+    if (!button) {
+      button = document.createElement("button");
+      button.type = "button";
+      th.append(button);
+    }
+
+    const icon = dir === ASC ? "▲" : dir === DESC ? "▼" : "⇕";
+    const label = th.dataset.label;
+
+    if (dir) {
+      const opposite = dir === ASC ? DESC : ASC;
+      button.setAttribute(
+        "aria-label",
+        `Sorted ${dir} by ${label}. Click to sort ${opposite}.`
+      );
+      th.setAttribute("aria-sort", dir);
+    } else {
+      button.setAttribute("aria-label", `Sort by ${label}`);
+      th.removeAttribute("aria-sort");
+    }
+    button.textContent = icon;
+  };
+
+  /** @type {NodeListOf<HTMLTableElement>} */
+  const tables = document.querySelectorAll("table.sortable");
+  tables.forEach(table => {
+    if (!table.tHead) return;
+    table.tHead.querySelectorAll("th").forEach(th => updateButton(th, null));
+  });
+
+  /**
+   * @param {MouseEvent} ev
+   * @returns {HTMLTableCellElement | null}
+   */
+  const getTrigger = ev => {
+    if (!(ev.target instanceof HTMLElement)) return null;
+    const th = ev.target.closest("th");
+    if (th instanceof HTMLTableCellElement && th.closest("table.sortable")) {
+      return th;
+    }
+    return null;
+  };
+
+  /**
+   * Stamps original row indices so the table can be reset to its initial order.
+   * @param {HTMLTableRowElement[]} rows
+   */
+  const stampOriginalOrder = rows => {
+    rows.forEach((row, i) => {
+      if (!row.dataset.sortIndex) {
+        row.dataset.sortIndex = String(i);
+      }
+    });
+  };
+
+  document.addEventListener("click", ev => {
+    const th = getTrigger(ev);
+    if (!th) return;
+
+    /** @type {HTMLTableElement | null} */
+    const table = th.closest("table.sortable");
+    if (!table || !table.tBodies.length) return;
+
+    let tableState = STATE.get(table);
+    if (!tableState) {
+      tableState = new WeakMap();
+      STATE.set(table, tableState);
+    }
+
+    const current = tableState.get(th) ?? null;
+    /** @type {"ascending" | "descending" | null} */
+    const next = current === null ? ASC : NEXT_DIR[current];
+
+    if (table.tHead) {
+      table.tHead.querySelectorAll("th").forEach(otherTh => {
+        if (otherTh !== th) {
+          tableState.delete(otherTh);
+          updateButton(otherTh, null);
+        }
+      });
+    }
+
+    if (next === null) {
+      tableState.delete(th);
+    } else {
+      tableState.set(th, next);
+    }
+    updateButton(th, next);
+
+    const tbody = table.tBodies[0];
+    /** @type {HTMLTableRowElement[]} */
+    const rows = Array.from(tbody.rows);
+    stampOriginalOrder(rows);
+
+    if (next === null) {
+      rows.sort(
+        (a, b) =>
+          parseInt(/** @type {string} */ (a.dataset.sortIndex), 10) -
+          parseInt(/** @type {string} */ (b.dataset.sortIndex), 10)
+      );
+    } else {
+      /** @type {HTMLTableRowElement | null} */
+      const headerRow = /** @type {HTMLTableRowElement | null} */ (
+        th.closest("tr")
+      );
+      if (!headerRow) return;
+      const colIndex = Array.from(headerRow.cells).indexOf(th);
+      if (colIndex === -1) return;
+
+      const isNumeric = rows.every(row => {
+        const text = row.cells[colIndex]?.textContent?.trim() ?? "";
+        return text !== "" && !isNaN(Number(text));
+      });
+
+      const dir = next === ASC ? 1 : -1;
+      rows.sort((a, b) => {
+        const x = a.cells[colIndex]?.textContent?.trim() ?? "";
+        const y = b.cells[colIndex]?.textContent?.trim() ?? "";
+        const cmp = isNumeric ? Number(x) - Number(y) : x.localeCompare(y);
+        return dir * cmp;
+      });
+    }
+
+    /** @type {typeof tbody} */
+    const newTbody = tbody.cloneNode(false);
+    for (const row of rows) newTbody.append(row);
+    tbody.replaceWith(newTbody);
+  });
+}
diff --git a/src/styles/sortable-table.css.js b/src/styles/sortable-table.css.js
new file mode 100644
index 0000000000..a7da1f6a55
--- /dev/null
+++ b/src/styles/sortable-table.css.js
@@ -0,0 +1,31 @@
+const css = String.raw;
+
+// prettier-ignore
+export default css`
+  .sortable th {
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .sortable th button {
+    background: transparent;
+    color: inherit;
+    border: none;
+    font-size: 0.7em;
+    padding: 0 0.3em;
+    cursor: pointer;
+    opacity: 0.5;
+    vertical-align: middle;
+  }
+
+  .sortable th button:hover,
+  .sortable th button:focus {
+    opacity: 1;
+    outline: 1px solid;
+  }
+
+  .sortable th[aria-sort="ascending"] button,
+  .sortable th[aria-sort="descending"] button {
+    opacity: 1;
+  }
+`;
diff --git a/tests/spec/core/sortable-table-spec.js b/tests/spec/core/sortable-table-spec.js
new file mode 100644
index 0000000000..984c9d8270
--- /dev/null
+++ b/tests/spec/core/sortable-table-spec.js
@@ -0,0 +1,214 @@
+"use strict";
+
+import { flushIframes, makeRSDoc, makeStandardOps } from "../SpecHelper.js";
+
+describe("Core — sortable-table", () => {
+  afterAll(flushIframes);
+
+  /**
+   * @param {HTMLElement} el
+   */
+  function click(el) {
+    el.dispatchEvent(
+      new MouseEvent("click", { bubbles: true, cancelable: true })
+    );
+  }
+
+  /**
+   * The runtime defers setup via document.respec.ready.then(), so we must
+   * flush the iframe's pending microtasks before interacting with buttons.
+   * @param {Document} doc
+   */
+  async function flushRuntime(doc) {
+    await new Promise(r => doc.defaultView.setTimeout(r, 0));
+  }
+
+  const sortableBody = `
+    <section>
+      <h2>Test Section</h2>
+      <table class="sortable">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Score</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>Charlie</td><td>3</td></tr>
+          <tr><td>Alice</td><td>1</td></tr>
+          <tr><td>Bob</td><td>2</td></tr>
+        </tbody>
+      </table>
+    </section>
+  `;
+
+  describe("module bootstrap", () => {
+    it("does not run when no sortable table is present", async () => {
+      const body = `<table><tr><td>plain table</td></tr></table>`;
+      const ops = makeStandardOps(null, body);
+      const doc = await makeRSDoc(ops);
+      const script = doc.getElementById("respec-sortable-table");
+      expect(script).toBeNull();
+    });
+
+    it("injects the runtime script when a sortable table exists", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      const script = doc.getElementById("respec-sortable-table");
+      expect(script).not.toBeNull();
+    });
+
+    it("injects a <style> element for sortable-table CSS", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      const headStyles = [...doc.querySelectorAll("head style")];
+      const found = headStyles.some(s => s.textContent.includes(".sortable"));
+      expect(found).toBeTrue();
+    });
+  });
+
+  describe("sort buttons", () => {
+    it("adds a sort button to each <th> in the sortable table", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const ths = doc.querySelectorAll("table.sortable thead th");
+      for (const th of ths) {
+        const btn = th.querySelector("button");
+        expect(btn).not.toBeNull();
+      }
+    });
+
+    it("buttons start with aria-label 'Sort by <column>'", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const ths = [...doc.querySelectorAll("table.sortable thead th")];
+      const btn0 = ths[0].querySelector("button");
+      expect(btn0.getAttribute("aria-label")).toBe("Sort by Name");
+    });
+
+    it("does not add sort buttons to non-sortable tables", async () => {
+      const body = `
+        ${sortableBody}
+        <table class="plain">
+          <thead><tr><th>Foo</th></tr></thead>
+          <tbody><tr><td>bar</td></tr></tbody>
+        </table>
+      `;
+      const ops = makeStandardOps(null, body);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const plainThBtn = doc.querySelector("table.plain thead th button");
+      expect(plainThBtn).toBeNull();
+    });
+  });
+
+  describe("aria-sort attribute", () => {
+    it("has no aria-sort before any click", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      expect(th.hasAttribute("aria-sort")).toBeFalse();
+    });
+
+    it("sets aria-sort='ascending' after first click", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      click(th.querySelector("button"));
+      expect(th.getAttribute("aria-sort")).toBe("ascending");
+    });
+
+    it("sets aria-sort='descending' after second click", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      const btn = th.querySelector("button");
+      click(btn);
+      click(btn);
+      expect(th.getAttribute("aria-sort")).toBe("descending");
+    });
+
+    it("removes aria-sort and restores order after third click", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      const btn = th.querySelector("button");
+      click(btn);
+      click(btn);
+      click(btn);
+      expect(th.hasAttribute("aria-sort")).toBeFalse();
+    });
+
+    it("resets aria-sort on other columns when a new column is clicked", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const [th0, th1] = doc.querySelectorAll("table.sortable thead th");
+      click(th0.querySelector("button"));
+      expect(th0.getAttribute("aria-sort")).toBe("ascending");
+      click(th1.querySelector("button"));
+      expect(th1.getAttribute("aria-sort")).toBe("ascending");
+      expect(th0.hasAttribute("aria-sort")).toBeFalse();
+    });
+  });
+
+  describe("text sort", () => {
+    it("sorts rows ascending (A→Z) on first click", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      click(th.querySelector("button"));
+      const rows = [...doc.querySelectorAll("table.sortable tbody tr")];
+      const names = rows.map(r => r.cells[0].textContent.trim());
+      expect(names).toEqual(["Alice", "Bob", "Charlie"]);
+    });
+
+    it("sorts rows descending (Z→A) on second click", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      const btn = th.querySelector("button");
+      click(btn);
+      click(btn);
+      const rows = [...doc.querySelectorAll("table.sortable tbody tr")];
+      const names = rows.map(r => r.cells[0].textContent.trim());
+      expect(names).toEqual(["Charlie", "Bob", "Alice"]);
+    });
+
+    it("restores original row order on third click (reset)", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const th = doc.querySelector("table.sortable thead th");
+      const btn = th.querySelector("button");
+      click(btn);
+      click(btn);
+      click(btn);
+      const rows = [...doc.querySelectorAll("table.sortable tbody tr")];
+      const names = rows.map(r => r.cells[0].textContent.trim());
+      expect(names).toEqual(["Charlie", "Alice", "Bob"]);
+    });
+  });
+
+  describe("numeric sort", () => {
+    it("sorts numeric columns by numeric value, not lexicographic order", async () => {
+      const ops = makeStandardOps(null, sortableBody);
+      const doc = await makeRSDoc(ops);
+      await flushRuntime(doc);
+      const ths = [...doc.querySelectorAll("table.sortable thead th")];
+      const scoreBtn = ths[1].querySelector("button");
+      click(scoreBtn);
+      const rows = [...doc.querySelectorAll("table.sortable tbody tr")];
+      const scores = rows.map(r => r.cells[1].textContent.trim());
+      expect(scores).toEqual(["1", "2", "3"]);
+    });
+  });
+});