HTML таблица с возможностью сортировки с сортированным по-умолчанию первым столбцом

Для реализации HTML-таблицы, в которой первый столбец отсортирован по-умолчанию, нужно просто вызвать функцию сортировки сразу после загрузки страницы. Включим сортировку по первому столбцу (индекс 0) при загрузке:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable Table</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        
        th {
            cursor: pointer;
            background-color: #f2f2f2;
        }
        
        th:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <table id="sortableTable">
        <thead>
            <tr>
                <th onclick="sortTable(0)">Name</th>
                <th onclick="sortTable(1)">Age</th>
                <th onclick="sortTable(2)">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>28</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Anna Smith</td>
                <td>24</td>
                <td>UK</td>
            </tr>
            <tr>
                <td>Peter Jones</td>
                <td>35</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Linda Swift</td>
                <td>30</td>
                <td>Australia</td>
            </tr>
        </tbody>
    </table>

    <script>
        function sortTable(columnIndex) {
            const table = document.getElementById("sortableTable");
            const rows = Array.from(table.rows).slice(1);
            const isNumeric = !isNaN(rows[0].cells[columnIndex].innerText);
            const isAscending = table.querySelectorAll('th')[columnIndex].classList.toggle('ascending');

            rows.sort((a, b) => {
                let cellA = a.cells[columnIndex].innerText;
                let cellB = b.cells[columnIndex].innerText;

                if (isNumeric) {
                    cellA = parseFloat(cellA);
                    cellB = parseFloat(cellB);
                }

                if (cellA > cellB) return isAscending ? 1 : -1;
                if (cellA < cellB) return isAscending ? -1 : 1;
                return 0;
            });

            for (const row of rows) {
                table.tBodies[0].appendChild(row);
            }
        }

        // Сортировка по первому столбцу при загрузке страницы
        document.addEventListener("DOMContentLoaded", function() {
            sortTable(0);
        });
    </script>
</body>
</html>

Объяснение:

DOMContentLoaded: Используем событие DOMContentLoaded для вызова функции sortTable(0) при загрузке страницы. Это обеспечивает сортировку первого столбца («Name») сразу после отображения таблицы на экране.
Стилизация: Аналогично предыдущему примеру, столбцы остаются кликабельными для изменения порядка сортировки.

Этот подход добавляет автоматическую сортировку, сохраняя возможность динамически изменять порядок столбцов по щелчку на заголовках.