Сортировка таблицы с помощью JavaScript

Напишем сортируемую таблицу на JavaScript. Этот код добавляет прослушиватель событий к каждому элементу th, который сортирует массив строк на основе содержимого столбца, по которому щелкнули. Атрибут data-sort-direction используется для отслеживания текущего направления сортировки. Затем отсортированные строки добавляются к новому элементу tbody, который заменяет старый tbody в таблице.

Пример, который мы напишем:

HTML:

<table id="sortableTable">
  <thead>
    <tr>
      <th>Full name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Danny Rowe</td>
      <td>18</td>
      <td>Iwjove</td>
    </tr>
    <tr>
      <td>Marguerite Houston</td>
      <td>28</td>
      <td>Nojkafhib</td>
    </tr>
    <tr>
      <td>Ada Ortega</td>
      <td>26</td>
      <td>Rubalbu</td>
    </tr>
    <tr>
      <td>Ruth Park</td>
      <td>33</td>
      <td>Cabevib</td>
    </tr>
    <tr>
      <td>Chad Ortega</td>
      <td>40</td>
      <td>Jucugez</td>
    </tr>
    <!-- Добавьте больше строк здесь -->
  </tbody>
</table>

CSS:

table {
  width: 100%;
  border-collapse: collapse;
  user-select: none;
}
th {
  cursor: pointer;
}
td,
th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

JavaScript:

const table = document.querySelector("#sortableTable");
const th = table.querySelectorAll("th");
let tbody = table.querySelector("tbody");
let rows = [...tbody.rows];

th.forEach((header) => {
  header.addEventListener("click", function () {
    let columnIndex = header.cellIndex;
    let sortDirection =
      header.getAttribute("data-sort-direction") === "asc" ? "desc" : "asc";
    header.setAttribute("data-sort-direction", sortDirection);

    rows.sort((a, b) => {
      let aValue = a.cells[columnIndex].textContent;
      let bValue = b.cells[columnIndex].textContent;

      if (sortDirection === "asc") {
        return aValue > bValue ? 1 : -1;
      } else {
        return bValue > aValue ? 1 : -1;
      }
    });

    tbody.remove();
    tbody = document.createElement("tbody");
    rows.forEach((row) => tbody.appendChild(row));
    table.appendChild(tbody);
  });
});