Updated table / sorting order

index.html

@@ -38,6 +38,34 @@
          min-width: 300px;
          padding: 10px; /* Add some spacing around the logo */
          }
+   /* Style for sort button */
+   .sortable {
+      cursor: pointer;
+      position: relative;
+      display: inline-block;
+      padding-right: 20px; /* Space for arrow */
+   }
+   .sortable::after {
+      content: "▼";
+      position: absolute;
+      right: 5px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 12px;
+      transition: transform 0.3s ease;
+   }
+   .sortable:checked::after {
+      transform: translateY(-50%) rotate(180deg);
+   }
+   /* Hide the input */
+   .sortable-input {
+      display: none;
+   }
+   /* Style for highlighting sorted column */
+   th.sorted {
+      background-color: var(--primary-color);
+      color: white;
+   }
          /* Leaderboard container with enhanced styles and shadow */
          .leaderboard-container {
          max-width: 1200px; /* Limit container width */
@@ -263,6 +291,113 @@
          }
       </style>
    </head>
+
+   <style>
+      th {
+         position: relative;
+         cursor: pointer;
+      }
+      .arrow {
+         margin-left: 8px;
+         font-size: 12px;
+         color: gray;
+      }
+      th.sorted-asc .arrow {
+         color: black;
+      }
+      th.sorted-desc .arrow {
+         color: black;
+      }
+   </style>
+
+   <script>
+      document.addEventListener("DOMContentLoaded", () => {
+         const table = document.querySelector(".leaderboard-container table");
+         const headers = table.querySelectorAll("thead th");
+         const tbody = table.querySelector("tbody");
+
+         const defaultSortColumnIndex = 5; // Index of the "Test Accuracy" column
+
+         headers.forEach((header, index) => {
+            // Create arrow span once for each header
+            const arrow = document.createElement("span");
+            arrow.classList.add("arrow");
+            header.appendChild(arrow);
+
+            header.addEventListener("click", () => {
+               const isAscending = header.classList.toggle("sorted-asc");
+               header.classList.toggle("sorted-desc", !isAscending);
+
+               // Update arrow directions for all headers
+               headers.forEach((h, i) => {
+                  const hArrow = h.querySelector(".arrow");
+                  if (i !== index) {
+                     h.classList.remove("sorted-asc", "sorted-desc");
+                     hArrow.textContent = ""; // Clear arrow for non-sorted columns
+                  } else {
+                     hArrow.textContent = isAscending ? "▲" : "▼"; // Set arrow direction
+                  }
+               });
+
+               const rows = Array.from(tbody.querySelectorAll("tr"));
+               const compare = (rowA, rowB) => {
+                  const cellA = rowA.children[index].textContent.trim();
+                  const cellB = rowB.children[index].textContent.trim();
+
+                  const valueA = parseCellValue(cellA);
+                  const valueB = parseCellValue(cellB);
+
+                  if (valueA < valueB) return isAscending ? -1 : 1;
+                  if (valueA > valueB) return isAscending ? 1 : -1;
+                  return 0;
+               };
+
+               rows.sort(compare);
+               rows.forEach(row => tbody.appendChild(row)); // Re-append sorted rows
+            });
+         });
+
+         // Helper function to parse cell values
+         const parseCellValue = (value) => {
+            // Handle percentages
+            if (value.includes('%')) {
+               return parseFloat(value.replace(/[^\d.-]/g, ''));
+            }
+
+            // Handle numbers with commas
+            if (value.includes(',')) {
+               return parseFloat(value.replace(/,/g, ''));
+            }
+
+            // Default to text if not numeric
+            return isNaN(value) ? value.toLowerCase() : parseFloat(value);
+         };
+
+         // Trigger default sorting by "Test Accuracy" in descending order
+         const defaultSortHeader = headers[defaultSortColumnIndex];
+         defaultSortHeader.classList.add("sorted-desc"); // Add descending class
+         const rows = Array.from(tbody.querySelectorAll("tr"));
+         const compare = (rowA, rowB) => {
+            const cellA = rowA.children[defaultSortColumnIndex].textContent.trim();
+            const cellB = rowB.children[defaultSortColumnIndex].textContent.trim();
+
+            const valueA = parseCellValue(cellA);
+            const valueB = parseCellValue(cellB);
+
+            if (valueA < valueB) return 1; // Reverse logic for descending
+            if (valueA > valueB) return -1;
+            return 0;
+         };
+
+         rows.sort(compare);
+         rows.forEach(row => tbody.appendChild(row)); // Re-append sorted rows
+         defaultSortHeader.querySelector(".arrow").textContent = "▼"; // Set descending arrow
+      });
+   </script>
+
+
+
+
    <body>
       <header>
          <div class="container">
@@ -340,17 +475,17 @@ <h2></h2>
          <h2 class="fade-in">Leaderboard</h2>
          <div class="leaderboard-wrapper fade-in">
             <div class="leaderboard-container">
-               <table width="80%" style="margin: 0 auto; border:0px solid;text-align:center">
-                  <thead>
-                     <tr>
-                        <th align="center">Model Name (.tflite)</th>
-                        <th align="center">Input Size</th>
-                        <th align="center">RAM (KiB)</th>
-                        <th align="center">Flash (KiB)</th>
-                        <th align="center">MACs (MM)</th>
-                        <th align="center">Test Accuracy</th>
-                     </tr>
-                  </thead>
+                <table width="80%" style="margin: 0 auto; border:0px solid;text-align:center">
+                    <thead>
+                        <tr>
+                            <th>Model Name</th>
+                            <th>Input Size</th>
+                            <th>RAM (KiB)</th>
+                            <th>Flash (KiB)</th>
+                            <th>MACs (MM)</th>
+                            <th>Test Accuracy</th>
+                        </tr>
+                    </thead>
                   <tbody>
                      <tr>
                         <td align="center"><a href="https://github.com/mit-han-lab/mcunet/blob/master/mcunet/model_zoo.py">mcunet-320kb-1mb_vww</a></td>