WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Table Component Updated the Sort Logic

Browse Source
This commit is contained in:
Clintchiz
2025-11-13 15:59:43 +05:30
parent 688d830ee9
commit 4973f94b2a
3 changed files with 135 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+105 -383
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -84,6 +84,7 @@
"devDependencies": { "devDependencies": {
"@iconify-json/lets-icons": "^1.2.1", "@iconify-json/lets-icons": "^1.2.1",
"@iconify-json/mdi": "^1.2.3", "@iconify-json/mdi": "^1.2.3",
"@iconify-json/solar": "^1.2.5",
"@iconify-json/tabler": "^1.2.22", "@iconify-json/tabler": "^1.2.22",
"@iconify/json": "2.2.382", "@iconify/json": "2.2.382",
"@iconify/utils": "^3.0.1", "@iconify/utils": "^3.0.1",
src/components/Table.astro
+29 -30
View File
@@ -1,4 +1,5 @@
--- ---
import { Icon } from "astro-icon/components";
import type { TableProps } from "../types/table/types"; import type { TableProps } from "../types/table/types";
import { cn } from "../utils/cn"; import { cn } from "../utils/cn";
@@ -76,8 +77,8 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
<div class="wr:flex wr:items-center wr:gap-1"> <div class="wr:flex wr:items-center wr:gap-1">
<span>{col.label}</span> <span>{col.label}</span>
{col.sortable && ( {col.sortable && (
<iconify-icon <Icon
icon="solar:sort-vertical-bold-duotone" name="solar:sort-vertical-line-duotone"
class="wr:text-lg wr:text-gray-400 sort-indicator" class="wr:text-lg wr:text-gray-400 sort-indicator"
/> />
)} )}
@@ -164,8 +165,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
let rowsPerPage = pagignations let rowsPerPage = pagignations
? parseInt(pageSizeSelector.value) ? parseInt(pageSizeSelector.value)
: 9999; : 9999;
let sortKey = null; let sort = {};
let sortOrder = "asc";
let totalRows = data.length; let totalRows = data.length;
let currentData = [...data]; let currentData = [...data];
@@ -326,8 +326,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
const result = await fetchDataFn({ const result = await fetchDataFn({
page: currentPage, page: currentPage,
pageSize: rowsPerPage, pageSize: rowsPerPage,
sortKey, sort,
sortOrder,
search: searchInput?.value || "", search: searchInput?.value || "",
}); });
currentData = result.data; currentData = result.data;
@@ -344,16 +343,21 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
} }
// sort locally if needed // sort locally if needed
if (sortKey !== null) { if (Object.keys(sort).length !== 0) {
const colKey = columns[sortKey]?.key; for (const key in sort) {
if (colKey) { const colKey = key;
currentData.sort((a, b) => { const colSortOrder = sort[key];
const aVal = String(a[colKey] ?? ""); if (colKey) {
const bVal = String(b[colKey] ?? ""); currentData.sort((a, b) => {
if (aVal < bVal) return sortOrder === "asc" ? -1 : 1; const aVal = String(a[colKey] ?? "");
if (aVal > bVal) return sortOrder === "asc" ? 1 : -1; const bVal = String(b[colKey] ?? "");
return 0; if (aVal < bVal)
}); return colSortOrder === "asc" ? -1 : 1;
if (aVal > bVal)
return colSortOrder === "asc" ? 1 : -1;
return 0;
});
}
} }
} }
@@ -430,23 +434,18 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
// 🧭 Sorting // 🧭 Sorting
sortHeaders.forEach((th, index) => { sortHeaders.forEach((th, index) => {
th.addEventListener("click", () => { th.addEventListener("click", () => {
if (sortKey === index) const key = th.dataset.sortKey;
sortOrder = sortOrder === "asc" ? "desc" : "asc";
else { let sortOrder = "asc";
sortKey = index; if (sort.hasOwnProperty(key)) {
sortOrder = "asc"; sortOrder = sort[key] === "asc" ? "desc" : "asc";
sort[key] = sortOrder;
} else {
sort[key] = sortOrder;
} }
sortHeaders.forEach((h) =>
h
.querySelector(".sort-indicator")
?.setAttribute(
"icon",
"solar:sort-vertical-bold-duotone",
),
);
th.querySelector(".sort-indicator")?.setAttribute( th.querySelector(".sort-indicator")?.setAttribute(
"icon", "data-icon",
sortOrder === "asc" sortOrder === "asc"
? "solar:sort-up-bold-duotone" ? "solar:sort-up-bold-duotone"
: "solar:sort-down-bold-duotone", : "solar:sort-down-bold-duotone",