Blogs/blogs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix independent data table sorting
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Neeldhara Misra 2026-06-29 02:19:40 +05:30
parent c06f71a5ad
commit 498ae6a12e
7 changed files with 98 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

17
sites/art/src/remark/semantic-blocks.mjs
View file

@ -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));

17
sites/poetry/src/remark/semantic-blocks.mjs
View file

@ -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));

17
sites/puzzles/src/remark/semantic-blocks.mjs
View file

@ -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));

17
sites/reflections/src/remark/semantic-blocks.mjs
View file

@ -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));

17
sites/research/src/remark/semantic-blocks.mjs
View file

@ -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));

17
sites/reviews/src/remark/semantic-blocks.mjs
View file

@ -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));

17
sites/vibes/src/remark/semantic-blocks.mjs
View file

@ -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));