feat: Sort table by value

templates/index.html

@@ -121,62 +121,93 @@
         }
 
         function populateTable(data) {
-            const tableContainer = document.getElementById('data-table');
-            tableContainer.innerHTML = ''; // Clear previous table data
+    const tableContainer = document.getElementById('data-table');
+    tableContainer.innerHTML = ''; // Clear previous table data
 
-            // Create table elements
-            const table = document.createElement('table');
-            table.style.margin = 'auto';
-            table.style.borderCollapse = 'collapse';
+    // Create table elements
+    const table = document.createElement('table');
+    table.style.margin = 'auto';
+    table.style.borderCollapse = 'collapse';
 
-            const thead = document.createElement('thead');
-            const tbody = document.createElement('tbody');
+    const thead = document.createElement('thead');
+    const tbody = document.createElement('tbody');
 
-            // Create table header
-            const headerRow = document.createElement('tr');
-            ['Name', 'Amount', 'Value'].forEach(headerText => {
-                const th = document.createElement('th');
-                th.textContent = headerText;
-                th.style.border = '1px solid #ccc';
-                th.style.padding = '8px 20px';
-                th.style.backgroundColor = '#333';
-                th.style.color = 'white';
-                headerRow.appendChild(th);
-            });
-            thead.appendChild(headerRow);
-
-            // Create table rows
-            for (const token in data) {
-                if (token !== 'total') {
-                    const row = document.createElement('tr');
-
-                    const nameCell = document.createElement('td');
-                    nameCell.textContent = data[token].name;
-                    nameCell.style.border = '1px solid #ccc';
-                    nameCell.style.padding = '8px 20px';
-
-                    const amountCell = document.createElement('td');
-                    amountCell.textContent = `${data[token].amount} ${token}`;
-                    amountCell.style.border = '1px solid #ccc';
-                    amountCell.style.padding = '8px 20px';
-
-                    const valueCell = document.createElement('td');
-                    valueCell.textContent = data[token].value;
-                    valueCell.style.border = '1px solid #ccc';
-                    valueCell.style.padding = '8px 20px';
-
-                    row.appendChild(nameCell);
-                    row.appendChild(amountCell);
-                    row.appendChild(valueCell);
-                    tbody.appendChild(row);
-                }
-            }
-            table.appendChild(thead);
-            table.appendChild(tbody);
-            tableContainer.appendChild(table);
+    // Create table header
+    const headerRow = document.createElement('tr');
+    ['Name', 'Amount', 'Value'].forEach((headerText, index) => {
+        const th = document.createElement('th');
+        th.textContent = headerText;
+        th.style.border = '1px solid #ccc';
+        th.style.padding = '8px 20px';
+        th.style.backgroundColor = '#333';
+        th.style.color = 'white';
 
+        if (headerText === 'Value') {
+            th.style.cursor = 'pointer'; // Make it clear this header is clickable
+            th.addEventListener('click', () => sortTableByValue(tbody));
         }
 
+        headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+
+    // Create table rows
+    for (const token in data) {
+        if (token !== 'total') {
+            const row = document.createElement('tr');
+
+            const nameCell = document.createElement('td');
+            nameCell.textContent = data[token].name;
+            nameCell.style.border = '1px solid #ccc';
+            nameCell.style.padding = '8px 20px';
+
+            const amountCell = document.createElement('td');
+            amountCell.textContent = `${data[token].amount} ${token}`;
+            amountCell.style.border = '1px solid #ccc';
+            amountCell.style.padding = '8px 20px';
+
+            const valueCell = document.createElement('td');
+            valueCell.textContent = data[token].value;
+            valueCell.style.border = '1px solid #ccc';
+            valueCell.style.padding = '8px 20px';
+
+            row.appendChild(nameCell);
+            row.appendChild(amountCell);
+            row.appendChild(valueCell);
+            tbody.appendChild(row);
+        }
+    }
+
+    table.appendChild(thead);
+    table.appendChild(tbody);
+    tableContainer.appendChild(table);
+    sortTableByValue(tbody);
+}
+
+// Function to sort table rows by the "Value" column
+function sortTableByValue(tbody) {
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+    const sortedRows = rows.sort((a, b) => {
+        const valueA = parseFloat(a.children[2].textContent) || 0;
+        const valueB = parseFloat(b.children[2].textContent) || 0;
+        return valueA - valueB;
+    });
+
+    // Reverse order if already sorted in ascending order
+    const isDecending = tbody.getAttribute('data-sort-order') === 'desc';
+    if (!isDecending) {
+        sortedRows.reverse();
+        tbody.setAttribute('data-sort-order', 'desc');
+    } else {
+        tbody.setAttribute('data-sort-order', 'asc');
+    }
+
+    // Append sorted rows back to the tbody
+    tbody.innerHTML = '';
+    sortedRows.forEach(row => tbody.appendChild(row));
+}
+
+
 
         async function toggleChart() {
             isPerTokenView = !isPerTokenView;