up

public/js/table-sort.js

@@ -0,0 +1,91 @@
+/**
+ * Simple table sorting script
+ * Enables sorting for all tables with the class 'sortable'
+ */
+document.addEventListener('DOMContentLoaded', function() {
+    // Get all tables with the class 'table'
+    const tables = document.querySelectorAll('table.table');
+    
+    // Add sortable class to all tables
+    tables.forEach(table => {
+        table.classList.add('sortable');
+    });
+    
+    // Get all sortable tables
+    const sortableTables = document.querySelectorAll('table.sortable');
+    
+    sortableTables.forEach(table => {
+        const thead = table.querySelector('thead');
+        const tbody = table.querySelector('tbody');
+        const thList = thead ? thead.querySelectorAll('th') : [];
+        
+        // Add click event to each header cell
+        thList.forEach((th, columnIndex) => {
+            // Skip if the header spans multiple rows or columns
+            if (th.hasAttribute('rowspan') || th.hasAttribute('colspan')) {
+                return;
+            }
+            
+            // Add sort indicator and cursor style
+            th.style.cursor = 'pointer';
+            th.innerHTML = `${th.innerHTML} <span class="sort-indicator"></span>`;
+            
+            // Add click event
+            th.addEventListener('click', () => {
+                const isAscending = th.classList.contains('sort-asc');
+                
+                // Remove sort classes from all headers
+                thList.forEach(header => {
+                    header.classList.remove('sort-asc', 'sort-desc');
+                    const indicator = header.querySelector('.sort-indicator');
+                    if (indicator) {
+                        indicator.textContent = '';
+                    }
+                });
+                
+                // Set sort direction
+                if (isAscending) {
+                    th.classList.add('sort-desc');
+                    th.querySelector('.sort-indicator').textContent = ' ▼';
+                } else {
+                    th.classList.add('sort-asc');
+                    th.querySelector('.sort-indicator').textContent = ' ▲';
+                }
+                
+                // Get all rows from tbody
+                const rows = Array.from(tbody.querySelectorAll('tr'));
+                
+                // Sort rows
+                rows.sort((rowA, rowB) => {
+                    const cellA = rowA.querySelectorAll('td')[columnIndex];
+                    const cellB = rowB.querySelectorAll('td')[columnIndex];
+                    
+                    if (!cellA || !cellB) {
+                        return 0;
+                    }
+                    
+                    const valueA = cellA.textContent.trim();
+                    const valueB = cellB.textContent.trim();
+                    
+                    // Check if values are numbers
+                    const numA = parseFloat(valueA);
+                    const numB = parseFloat(valueB);
+                    
+                    if (!isNaN(numA) && !isNaN(numB)) {
+                        return isAscending ? numB - numA : numA - numB;
+                    }
+                    
+                    // Sort as strings
+                    return isAscending 
+                        ? valueB.localeCompare(valueA, undefined, {sensitivity: 'base'}) 
+                        : valueA.localeCompare(valueB, undefined, {sensitivity: 'base'});
+                });
+                
+                // Reorder rows in the table
+                rows.forEach(row => {
+                    tbody.appendChild(row);
+                });
+            });
+        });
+    });
+});