refactor etf provider

src/routes/etf/etf-providers/[slug]/+page.svelte

@@ -2,6 +2,7 @@
   import { abbreviateNumber, formatETFName } from "$lib/utils";
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { onMount } from "svelte";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
 
   export let data;
   let rawData = data?.getETFProviderData;
@@ -35,7 +36,85 @@
     };
   });
 
-  $: charNumber = $screenWidth < 640 ? 20 : 30;
+  $: charNumber = $screenWidth < 640 ? 20 : 20;
+
+  let columns = [
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "price", label: "Price", align: "right" },
+    { key: "changesPercentage", label: "Change", align: "right" },
+    { key: "totalAssets", label: "Total Assets", align: "right" },
+    { key: "numberOfHoldings", label: "Holdings", align: "right" },
+    { key: "expenseRatio", label: "Expense Ratio", align: "right" },
+  ];
+
+  let sortOrders = {
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    price: { order: "none", type: "number" },
+    changesPercentage: { order: "none", type: "number" },
+    totalAssets: { order: "none", type: "number" },
+    numberOfHoldings: { order: "none", type: "number" },
+    expenseRatio: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = rawData;
+
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      etfProviderData = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    etfProviderData = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
 </script>
 
 <svelte:head>
@@ -131,23 +210,12 @@
     <!-- Page wrapper -->
     <div class="flex justify-center w-full m-auto h-full overflow-hidden">
       <!-- Content area -->
-      <div class="w-full overflow-x-scroll pt-5">
+      <div class="w-full overflow-x-auto mt-5">
         <table
-          class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
+          class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
         >
           <thead>
-            <tr class="border border-slate-800">
-              <th class="text-white font-semibold text-sm">Symbol</th>
-              <th class="text-white font-semibold text-sm">Fund Name</th>
-              <th class="text-white font-semibold text-end text-sm"
-                >Total Assets</th
-              >
-              <th class="text-white font-semibold text-sm text-end">Holdings</th
-              >
-              <th class="text-white font-semibold text-sm text-end"
-                >Expense Ratio</th
-              >
-            </tr>
+            <TableHeader {columns} {sortOrders} {sortData} />
           </thead>
           <tbody>
             {#each etfProviderData as item}
@@ -174,6 +242,32 @@
                     : item?.name}
                 </td>
 
+                <td
+                  class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
+                >
+                  {item?.price}
+                </td>
+
+                <td
+                  class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end"
+                >
+                  {#if item?.changesPercentage >= 0}
+                    <span class="text-[#00FC50]"
+                      >+{item?.changesPercentage >= 1000
+                        ? abbreviateNumber(item?.changesPercentage)
+                        : item?.changesPercentage?.toFixed(2)}%</span
+                    >
+                  {:else if item?.changesPercentage < 0}
+                    <span class="text-[#FF2F1F]"
+                      >{item?.changesPercentage <= -1000
+                        ? abbreviateNumber(item?.changesPercentage)
+                        : item?.changesPercentage?.toFixed(2)}%
+                    </span>
+                  {:else}
+                    -
+                  {/if}
+                </td>
+
                 <td
                   class="text-white font-medium border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap"
                 >