1 files changed, 96 insertions, 0 deletions
diff --git a/src/parts/end.html b/src/parts/end.html
new file mode 100644
index 0000000..204188c
--- /dev/null
+++ b/src/parts/end.html
@@ -0,0 +1,96 @@
+      </tbody>
+    </table>
+  </div>
+</body>
+
+<script type="text/javascript">
+  const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
+  prevColumnSorted = document.getElementsByClassName("current-sort")[0];
+  
+  const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
+    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
+    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
+  
+  function doSort(th) {
+    console.log("Doing sort to: ", th.textContent, th);
+    
+    const table = th.closest('table');
+    const tbody = table.querySelector('tbody');
+    const columnIndex = Array.from(th.parentNode.children).indexOf(th);
+    
+    // Toggle sort direction
+    if (prevColumnSorted == th) {
+      this.asc = !this.asc;
+    } else {
+      this.asc = true;
+    }
+    
+    // Get all rows, sort them, then reappend to tbody
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+    const sortedRows = rows.sort(comparer(columnIndex, this.asc));
+    
+    sortedRows.forEach(row => tbody.appendChild(row));
+    prevColumnSorted = th;
+  }
+  
+  // Event listeners and initial sort
+  document.querySelectorAll('th').forEach(th => th.addEventListener('click', () => {
+    document.querySelectorAll('.current-sort').forEach(el => el.classList.remove('current-sort'));
+    th.classList.add('current-sort');
+    doSort(th);
+  }));
+
+  // Column and row highlighting on hover
+  const table = document.querySelector('table');
+  const allCells = table.querySelectorAll('td, th');
+  let currentCol = -1;
+  let currentRow = null;
+  
+  allCells.forEach(cell => {
+    cell.addEventListener('mouseenter', function() {
+      const colIndex = Array.from(this.parentNode.children).indexOf(this);
+      const row = this.parentNode;
+      const isHeader = this.tagName === 'TH';
+      
+      // Only update if we're entering a different column or row
+      if (colIndex !== currentCol || row !== currentRow) {
+        // Remove previous highlights
+        table.querySelectorAll('.highlight-col').forEach(el => {
+          el.classList.remove('highlight-col');
+        });
+        table.querySelectorAll('.highlight-row').forEach(el => {
+          el.classList.remove('highlight-row');
+        });
+        
+        // Add new column highlights (only tbody cells)
+        table.querySelector('tbody').querySelectorAll('tr').forEach(r => {
+          if (r.children[colIndex]) {
+            r.children[colIndex].classList.add('highlight-col');
+          }
+        });
+        
+        // Add row highlight (only for tbody rows, not header)
+        if (!isHeader) {
+          row.classList.add('highlight-row');
+        }
+        
+        currentCol = colIndex;
+        currentRow = row;
+      }
+    });
+  });
+  
+  // Clear highlights when leaving the table entirely
+  table.addEventListener('mouseleave', function() {
+    table.querySelectorAll('.highlight-col').forEach(el => {
+      el.classList.remove('highlight-col');
+    });
+    table.querySelectorAll('.highlight-row').forEach(el => {
+      el.classList.remove('highlight-row');
+    });
+    currentCol = -1;
+    currentRow = null;
+  });
+</script>
+
+</html>