Fix independent data table sorting

sites/art/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));
 

sites/poetry/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));
 

sites/puzzles/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));
 

sites/reflections/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));
 

sites/research/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));
 

sites/reviews/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));
 

sites/vibes/src/remark/semantic-blocks.mjs

@@ -256,6 +256,10 @@ function dataTableScript(id) {
   const rows = Array.from(tbody?.querySelectorAll("tr") || []);
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
 
+  rows.forEach((row, index) => {
+    row.dataset.dataTableIndex = String(index);
+  });
+
   function applyFilter() {
     const query = (input?.value || "").trim().toLowerCase();
     let visible = 0;
@@ -274,12 +278,18 @@ function dataTableScript(id) {
   root.querySelectorAll("[data-data-table-sort]").forEach((button) => {
     button.addEventListener("click", () => {
       const column = button.dataset.dataTableSort;
-      const current = button.getAttribute("aria-sort");
+      const previousColumn = root.dataset.dataTableSortColumn || "";
-      const direction = current === "ascending" ? "descending" : "ascending";
+      const previousDirection = root.dataset.dataTableSortDirection || "";
+      const direction =
+        previousColumn === column && previousDirection === "ascending"
+          ? "descending"
+          : "ascending";
 
       root.querySelectorAll("[data-data-table-sort]").forEach((other) => {
         other.removeAttribute("aria-sort");
       });
+      root.dataset.dataTableSortColumn = column;
+      root.dataset.dataTableSortDirection = direction;
       button.setAttribute("aria-sort", direction);
 
       rows
@@ -288,7 +298,8 @@ function dataTableScript(id) {
           const leftValue = left.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const rightValue = right.querySelector(\`[data-column="\${column}"]\`)?.dataset.sortValue || "";
           const result = collator.compare(leftValue, rightValue);
-          return direction === "ascending" ? result : -result;
+          if (result !== 0) return direction === "ascending" ? result : -result;
+          return Number(left.dataset.dataTableIndex || 0) - Number(right.dataset.dataTableIndex || 0);
         })
         .forEach((row) => tbody.appendChild(row));