Сортируемая таблица
Условие
Таблица по массиву rows и описанию колонок columns: [{ key, title }]. Требования: · заголовок колонки - <th><button class="sort" data-key={key}>; · первый клик - по возрастанию, второй - по убыванию, третий - сброс к исходному порядку; · у активной колонки атрибут aria-sort со значением ascending / descending; · строки - <tr class="row">, ячейки - <td>; · исходный массив rows не мутируется; · строки, равные по ключу, сохраняют взаимный порядок.
Что проверяют тесты
рисует строки в исходном порядке
сортирует по возрастанию
числа сравниваются как числа
второй клик - по убыванию, третий - сброс
aria-sort отражает состояние
исходный массив не мутируется
смена колонки начинает с возрастания
Как подойти
Цикл из трёх состояний (возр → убыв → сброс) выражается одним значением или null - так невозможно оказаться в противоречивом состоянии. Обязательно [...rows].sort(): sort мутирует, а пропсы трогать нельзя. Сортировка в JS стабильна по спецификации, поэтому равные элементы сами сохраняют порядок. Что назвать вслух: сортировка по нескольким колонкам, вынос компаратора в пропсы колонки, виртуализация при десятках тысяч строк, серверная сортировка.
Подсказки: 3
- Состояние сортировки - один объект { key, dir } или null, а не два независимых значения.
- sort мутирует массив: копируй перед сортировкой.
- Числа и строки сравниваются по-разному - localeCompare для строк даст неверный порядок числам.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.