Sortable Table

<!DOCTYPE html>
<title>My Example</title>

<table class="sortable-table" id="mySortableTable">
    <thead>
        <tr>
            
            <th scope="col" class="sortable-header">Country</th>
            <th scope="col" class="sortable-header">Capital City</th>
            <th scope="col" class="sortable-header td-number">Population (millions)</th>
            <th scope="col" class="sortable-header td-number">Area (kmÂ²)</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Japan</td><td>Tokyo</td><td class="td-number">125.7</td><td class="td-number">377975</td></tr>
        <tr><td>Brazil</td><td>BrasÃlia</td><td class="td-number">212.6</td><td class="td-number">8515767</td></tr>
        <tr><td>Canada</td><td>Ottawa</td><td class="td-number">38.0</td><td class="td-number">9984670</td></tr>
        <tr><td>Germany</td><td>Berlin</td><td class="td-number">83.2</td><td class="td-number">357022</td></tr>
        <tr><td>Australia</td><td>Canberra</td><td class="td-number">25.7</td><td class="td-number">7692024</td></tr>
        <tr><td>India</td><td>New Delhi</td><td class="td-number">1380.0</td><td class="td-number">3287263</td></tr>
    </tbody>
</table>

headers.forEach((header, headerIndex) => {
        // Add a sort icon to each header
        const sortIcon = document.createElement('span');
        sortIcon.classList.add('sort-icon');
        sortIcon.innerHTML = ' &#x2195';
        header.appendChild(sortIcon);

header.addEventListener('click', () => {
            // Determine sort direction
            if (currentSort.column === headerIndex) {
                currentSort.isAscending = !currentSort.isAscending;
            } else {
                currentSort.column = headerIndex;
                currentSort.isAscending = true;
            }

const tableBody = table.querySelector('tbody');
            const rows = Array.from(tableBody.querySelectorAll('tr'));

// Sort the rows
            rows.sort((a, b) => {
                const aValue = a.children[headerIndex].innerText;
                const bValue = b.children[headerIndex].innerText;
                
                // Check if the values are numbers
                const isNumber = !isNaN(parseFloat(aValue)) && isFinite(aValue);
                
                if (isNumber) {
                    return currentSort.isAscending 
                        ? parseFloat(aValue) - parseFloat(bValue) 
                        : parseFloat(bValue) - parseFloat(aValue);
                } else {
                    return currentSort.isAscending 
                        ? aValue.localeCompare(bValue) 
                        : bValue.localeCompare(aValue);
                }
            });

// Re-append rows in sorted order
            rows.forEach(row => tableBody.appendChild(row));
            
            // Update sort icons
            updateSortIcons(headers, currentSort);
        });
    });
}

// Initialize the sortable table
const myTable = document.getElementById('mySortableTable');
if (myTable) {
    makeTableSortable(myTable);
}
</script>