JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
    <thead>
        <tr>
            <th>Место</th>
            <th>Страна</th>
            <th>Площадь</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Россия </td>
            <td>17075400</td>
            
        </tr>
        <tr>
            <td>2</td>
            <td>Канада </td>
            <td>9</td>
        </tr>
        <tr>
            
            <td>3</td>
            <td>Китайская Народная Республика (КНР) </td>
            <td>9598961</td>
        </tr>
    </tbody>
</table>

CSS

th.sortedASC::after {
    content: " ^";
}
th.sortedDESC::after {
    content: " v";
}
th.sortedNONE::after {
    content: "  ";
}

JavaScript

function initTable(tableId) {

    var table = document.getElementById(tableId);
    if (!table) {
        console.log('wrong id: ' + tableId);
        return null;
    }

    table.directions = [];
    table.sortedBy = -1;

    for (var i = 0; i < table.tHead.rows[0].cells.length; i++) {
        var th = table.tHead.rows[0].cells[i];
        th.addEventListener('click', function() {
            sortTable(tableId, this.cellIndex);
        }, false);
        table.directions[i] = false;
        th.className = 'sortedNONE';
    }
}

function sortTable(tableId, col) {
    var table = document.getElementById(tableId);

    if (typeof table['directions'] == 'undefined') {
        console.log('wrong params - id: ' + tableId + ' col: ' + col);
        return;
    }

    if (col < 0 || col >= table.tHead.rows[0].cells.length) {
        console.log('wrong params - id: ' + tableId + ' col: ' + col);
        return;
    }
    table.directions[col] = !table.directions[col];

    if (table.sortedBy >= 0) table.tHead.rows[0].cells[table.sortedBy].className = 'sortedNONE';
    table.tHead.rows[0].cells[col].className = table.directions[col] ? 'sortedASC' : 'sortedDESC';

    table.sortedBy = col;

    var rows = [];
    for (var i = 0; i < table.tBodies[0].rows.length; i++) {
        rows[i] = table.tBodies[0].rows[i];
    }

    rows.sort(function(a, b) {
        var str_a = a.cells[col].innerHTML;
        var str_b = b.cells[col].innerHTML;
        if (isNaN(str_a) || isNaN(str_b)) return str_a < str_b ? -1 : str_a > str_b ? 1 : 0;
        var num_a = +str_a;
        var num_b = +str_b;
        return num_a < num_b ? -1 : num_a > num_b ? 1 : 0;
    });

    if (table.directions[col]) {
        for (var i = 0; i < rows.length; i++) {
            table.tBodies[0].appendChild(rows[i]);
        }
    } else {
        for (var i = rows.length; i > 0; i--) {
            table.tBodies[0].appendChild(rows[i - 1]);
        }
    }
}
// onDomReady || onload
window.onload = function()...