From 498ae6a12e60111db35fd352ff7753dfd115e6ad Mon Sep 17 00:00:00 2001 From: Neeldhara Misra Date: Mon, 29 Jun 2026 02:19:40 +0530 Subject: [PATCH] Fix independent data table sorting --- sites/art/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- sites/poetry/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- sites/puzzles/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- .../reflections/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- sites/research/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- sites/reviews/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- sites/vibes/src/remark/semantic-blocks.mjs | 17 ++++++++++++++--- 7 files changed, 98 insertions(+), 21 deletions(-) diff --git a/sites/art/src/remark/semantic-blocks.mjs b/sites/art/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/art/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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)); diff --git a/sites/poetry/src/remark/semantic-blocks.mjs b/sites/poetry/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/poetry/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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)); diff --git a/sites/puzzles/src/remark/semantic-blocks.mjs b/sites/puzzles/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/puzzles/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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)); diff --git a/sites/reflections/src/remark/semantic-blocks.mjs b/sites/reflections/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/reflections/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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)); diff --git a/sites/research/src/remark/semantic-blocks.mjs b/sites/research/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/research/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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)); diff --git a/sites/reviews/src/remark/semantic-blocks.mjs b/sites/reviews/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/reviews/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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)); diff --git a/sites/vibes/src/remark/semantic-blocks.mjs b/sites/vibes/src/remark/semantic-blocks.mjs index f7f3fa5..b4049be 100644 --- a/sites/vibes/src/remark/semantic-blocks.mjs +++ b/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 direction = current === "ascending" ? "descending" : "ascending"; + const previousColumn = root.dataset.dataTableSortColumn || ""; + 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));