Allow sorting of tables in messages by clicking on the table header

ts/WoltLabSuite/Core/Bootstrap.ts

@@ -159,6 +159,9 @@ export function setup(options: BoostrapOptions): void {
   whenFirstSeen(".messageTabMenu", () => {
     void import("./Component/Message/MessageTabMenu").then(({ setup }) => setup());
   });
+  whenFirstSeen(".htmlContent .sortableTable", () => {
+    void import("./Component/Message/MessageTableSort").then(({ setup }) => setup());
+  });
   whenFirstSeen("[data-edit-avatar]", () => {
     void import("./Component/User/Avatar").then(({ setup }) => setup());
   });

ts/WoltLabSuite/Core/Component/Message/MessageTableSort.ts

@@ -0,0 +1,147 @@
+/**
+ * Adds client-side sorting to tables in message content that have header cells (<th>).
+ * Clicking a header cell sorts the table rows by that column, toggling between
+ * ascending and descending order.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
+
+function getHeaderCells(table: HTMLTableElement): HTMLTableCellElement[] | null {
+  const thead = table.querySelector(":scope > thead");
+  if (thead) {
+    const ths = thead.querySelectorAll<HTMLTableCellElement>(":scope > tr > th");
+    if (ths.length > 0) {
+      return Array.from(ths);
+    }
+  }
+
+  return null;
+}
+
+function hasComplexLayout(table: HTMLTableElement): boolean {
+  const cells = table.querySelectorAll("td, th");
+  for (const cell of cells) {
+    if (
+      (cell instanceof HTMLTableCellElement && cell.rowSpan > 1) ||
+      (cell instanceof HTMLTableCellElement && cell.colSpan > 1)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function getBodyRows(table: HTMLTableElement, headerCells: HTMLTableCellElement[]): HTMLTableRowElement[] {
+  const headerRow = headerCells[0].closest("tr")!;
+  const rows: HTMLTableRowElement[] = [];
+
+  const allRows = table.querySelectorAll<HTMLTableRowElement>(":scope > tbody > tr, :scope > tr");
+  for (const row of allRows) {
+    if (row !== headerRow) {
+      rows.push(row);
+    }
+  }
+
+  return rows;
+}
+
+function getCellValue(row: HTMLTableRowElement, columnIndex: number): string {
+  const cell = row.cells[columnIndex];
+  if (!cell) {
+    return "";
+  }
+  return (cell.textContent || "").trim();
+}
+
+function createComparator(order: "ASC" | "DESC"): (a: string, b: string) => number {
+  const multiplier = order === "ASC" ? 1 : -1;
+
+  return (a: string, b: string): number => {
+    const numA = parseFloat(a);
+    const numB = parseFloat(b);
+
+    if (!isNaN(numA) && !isNaN(numB) && String(numA) === a && String(numB) === b) {
+      return (numA - numB) * multiplier;
+    }
+
+    return a.localeCompare(b) * multiplier;
+  };
+}
+
+function sortByColumn(
+  table: HTMLTableElement,
+  headerCells: HTMLTableCellElement[],
+  columnIndex: number,
+  order: "ASC" | "DESC",
+): void {
+  const rows = getBodyRows(table, headerCells);
+  const container = rows[0]?.parentElement;
+  if (!container || rows.length === 0) {
+    return;
+  }
+
+  const comparator = createComparator(order);
+
+  rows.sort((rowA, rowB) => {
+    const valueA = getCellValue(rowA, columnIndex);
+    const valueB = getCellValue(rowB, columnIndex);
+    return comparator(valueA, valueB);
+  });
+
+  for (const row of rows) {
+    container.appendChild(row);
+  }
+}
+
+function initTable(table: HTMLTableElement): void {
+  if (hasComplexLayout(table)) {
+    return;
+  }
+
+  const headerCells = getHeaderCells(table);
+  if (!headerCells) {
+    return;
+  }
+
+  headerCells.forEach((th, columnIndex) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "messageTableSort__trigger";
+
+    while (th.firstChild) {
+      button.appendChild(th.firstChild);
+    }
+    th.appendChild(button);
+    th.setAttribute("aria-sort", "none");
+
+    button.addEventListener("click", () => {
+      let newOrder: "ASC" | "DESC";
+      if (th.classList.contains("ASC")) {
+        newOrder = "DESC";
+      } else {
+        newOrder = "ASC";
+      }
+
+      for (const sibling of headerCells) {
+        sibling.classList.remove("ASC", "DESC");
+        sibling.setAttribute("aria-sort", "none");
+      }
+
+      th.classList.add(newOrder);
+      th.setAttribute("aria-sort", newOrder === "ASC" ? "ascending" : "descending");
+
+      sortByColumn(table, headerCells, columnIndex, newOrder);
+    });
+  });
+}
+
+export function setup(): void {
+  wheneverFirstSeen(".htmlContent .sortableTable", (table: HTMLTableElement) => {
+    initTable(table);
+  });
+}

wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeTable.class.php

@@ -51,6 +51,8 @@ public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProc
                     }
                 }
 
+                $this->flagTableAsSortable($element, $htmlNodeProcessor);
+
                 // check if table is not contained within another table
                 $parent = $element;
                 while ($parent = $parent->parentNode) {
@@ -67,4 +69,20 @@ public function process(array $elements, AbstractHtmlNodeProcessor $htmlNodeProc
             }
         }
     }
+
+    private function flagTableAsSortable(\DOMElement $tableElement, AbstractHtmlNodeProcessor $htmlNodeProcessor): void
+    {
+        $tableHeaders = $htmlNodeProcessor->getXPath()->query('.//thead', $tableElement);
+        if ($tableHeaders->count() === 0) {
+            return;
+        }
+
+        $class = $tableElement->getAttribute('class');
+        if ($class) {
+            $class .= " ";
+        }
+        $class .= "sortableTable";
+
+        $tableElement->setAttribute('class', $class);
+    }
 }

wcfsetup/install/files/style/ui/tabularBox.scss

@@ -151,20 +151,31 @@ html:not(.touch) .tabularListRow:not(.tabularListRowHead):hover {
 			color: var(--wcfTabularBoxHeadlineActive);
 		}
 
+		> .messageTableSort__trigger {
+			display: block;
+
+			&:hover {
+				color: var(--wcfTabularBoxHeadlineActive);
+			}
+		}
+
 		&.ASC,
 		&.DESC {
-			> a::after {
+			> a::after,
+			> .messageTableSort__trigger::after {
 				display: inline-block;
 				margin-left: 5px;
 			}
 		}
 
-		&.ASC > a::after {
+		&.ASC > a::after,
+		&.ASC > .messageTableSort__trigger::after {
 			// 2191 = UPWARDS ARROW
 			content: "\2191";
 		}
 
-		&.DESC > a::after {
+		&.DESC > a::after,
+		&.DESC > .messageTableSort__trigger::after {
 			// 2193 = DOWNWARDS ARROW
 			content: "\2193";
 		}