Javascript: Сортировка таблицы

JS: Архитектура фронтенда 9 сообщений
Обновлено: 23 сент., 11:22
140
Студентов
68%
Завершения

В этой задаче вам предстоит реализовать грид. В интерфейсах так называется список, выведенный в табличном виде и позволяющий выполнять разные действия над ним, например, сортировку.

В качестве данных нужно взять объект document.location, который содержит в себе информацию о браузере. Пример неполного вывода:

Name (Asc) Value (Unsorted)
host localhost
pathname /

Вывести нужно только те свойства, которые удовлетворяют условиям:

  • Не функции
  • Не объекты
  • Не пустые

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

<div class="container m-3">
    <table class="table">
        <tbody>
            <tr>
                <th><a href="">Name (Asc)</a></th>
                <th><a href="">Value (Unsorted)</a></th>
            </tr>
            <tr>
                <td>host</td>
                <td>localhost</td>
            </tr>
            <tr>
                <td>hostname</td>
                <td>localhost</td>
            </tr>
            <tr>
                <td>href</td>
                <td>http://localhost/</td>
            </tr>
            <tr>
                <td>origin</td>
                <td>http://localhost</td>
            </tr>
            <tr>
                <td>pathname</td>
                <td>/</td>
            </tr>
            <tr>
                <td>protocol</td>
                <td>http:</td>
            </tr>
        </tbody>
    </table>
</div>

Рядом с каждым заголовком, в скобках, указано состояние столбца. Всего их три:

  • Не отсортирован
  • Прямой
  • Обратный

В один момент времени сортировка может быть выполнена только по одному столбцу.

src/application.js

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

Подсказки

  • Сравнение строк localeCompare
  • Переводы можно вкладывать друг в друга: I18n.t('key', { value: I18n.t('another key') })
  • Получить все свойства объекта (включая то что наследуется) можно через цикл for..in

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов