Как показать сортировку в таблице: направление, приоритет и доступность

Сортировка в таблице понятна, когда человек видит, какой столбец управляет порядком строк, куда направлено упорядочивание и что произойдёт при следующем нажатии. Одной стрелки в заголовке недостаточно: важны текстовое название действия, согласованные правила для разных типов значений, состояние без сортировки и корректное сообщение для клавиатуры и экранного диктора.

Перед тем как рисовать стрелки, зафиксируйте модель сортировки. Сортировка может действовать только на видимые строки текущей страницы, на весь набор данных или на отфильтрованный результат. Для таблицы на одной странице это часто одно и то же. При серверной пагинации — нет: локальная перестановка 20 видимых записей не равна сортировке тысячи найденных результатов. Интерфейс должен либо отправлять серверу поле и направление, либо прямо описывать локальный охват.

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

Наконец, решите, включена ли сортировка по умолчанию. Если таблица изначально упорядочена по дате создания, укажите это в интерфейсе как активное состояние. Иначе первое нажатие может неожиданно переключить порядок, который человек не замечал.

Сделайте сортируемый заголовок явной кнопкой или другим настоящим интерактивным элементом. Не полагайтесь на кликабельный текст внутри ячейки, у которого нет понятного состояния фокуса. Название колонки отвечает на вопрос «что это за данные?», а кнопка и визуальный индикатор — «что можно сделать и что происходит сейчас?».

Короткая подпись «Дата» полезна для таблицы, но сама по себе не объясняет, появятся ли сначала новые или старые записи. Используйте индикатор направления и при необходимости подсказку либо доступное описание: «Сортировать по дате, сначала новые». После нажатия название поля не должно меняться; меняется состояние сортировки.

Не делайте сортируемыми все заголовки по умолчанию. Если значение не имеет полезного порядка — например, у столбца с кнопкой «Открыть» или у составного описания, — добавление стрелки обещает несуществующую функцию. Неактивные для сортировки заголовки должны выглядеть и работать как заголовки, а не как кнопки.

«По возрастанию» — формально точное, но не всегда понятное пользователю описание. Для чисел это может быть от меньшего к большему, для дат — от ранних к поздним, для текста — по алфавиту. Для статусов «возрастание» редко имеет очевидный смысл. У каждого столбца должно быть определённое правило, которое можно объяснить словами.

Например, для статусов заказа естественный путь может быть «Новый → В работе → Готов → Отменён». Алфавитная сортировка формально возможна, но редко отвечает рабочему вопросу. Явный порядок статусов нужно определить в продуктовой модели, а не угадывать по цветам меток.

Для сумм и дат проверьте, что сортируется исходное значение, а не его форматированная подпись. Строки «9 ₽», «100 ₽» и «20 ₽» в лексикографическом порядке могут расположиться не как числа; текстовая дата «02.10» может сравниваться не как календарная дата. Формат отображения и ключ сортировки — отдельные вещи.

Индикатор должен отличать три состояния: поле сортируемо, поле сейчас управляет порядком, направление активно. В интерфейсе с несколькими сортируемыми колонками можно показывать нейтральный знак у доступных действий, а у активного заголовка — контрастную стрелку вверх или вниз. Но форма, положение и состояние не должны различаться только цветом.

Сохраняйте смысл иконок во всём продукте. Если вверх означает «раньше» для даты, не используйте ту же стрелку как «от большего к меньшему» без объяснения. Лучше визуально и текстом придерживаться общего правила: вверх соответствует возрастанию, вниз — убыванию, а рядом показывать активное поле. Для бизнес-порядка статусов добавьте понятную подпись или подсказку, не полагаясь на математический термин.

Не показывайте одновременно несколько стрелок, будто несколько столбцов независимо задают главный порядок. При сортировке по нескольким полям нужно явно представить приоритет: например, «Сначала статус, затем дата». Можно добавить номера приоритета к заголовкам или компактный список активных правил. Удаление и перестановка уровней должны быть доступны отдельно, если таблица действительно поддерживает такую модель.

Для простой таблицы достаточно цикла «не отсортировано → по возрастанию → по убыванию». Но если таблица уже открывается в исходном порядке по дате, состояние «не отсортировано» может быть технически неотличимо от активной сортировки по умолчанию. Зафиксируйте, что значит третий клик: вернуть исходный порядок, сохранить порядок сервера или снова включить направление по умолчанию. Не заставляйте пользователей угадывать.

Если возврат к исходному порядку нужен, назовите его и визуально отделите от направления. Кнопка может иметь разные подсказки: «Сортировать от старых к новым», затем «Сортировать от новых к старым», затем «Сбросить сортировку». Когда сброс не нужен, остановите цикл после двух состояний, чтобы пользователь не получал случайный скачок строк.

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

Результат сортировки должен быть предсказуемым, когда значения совпадают. Например, несколько строк имеют одну дату. Добавьте стабильный вторичный ключ — часто это имя или идентификатор — чтобы при каждом повторении данные не перемешивались. Необязательно показывать второе поле в заголовке, если оно служит только технической стабилизации, но правило должно быть одинаковым.

Пустые и неизвестные значения требуют отдельного решения. Пустая дата, отсутствующая цена и нулевое значение — разные состояния. Выберите, остаются ли пустые записи в конце при обоих направлениях или перемещаются вместе с сортировкой, и применяйте правило последовательно. Уточнение особенно важно в выгружаемых отчётах и таблицах, где человек сравнивает результаты с экраном.

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

В нативной HTML-таблице сохраняйте структуру table, thead, tr и th. Внутри сортируемого th разместите кнопку с текстовой меткой и понятным фокусом. Для заголовка активной колонки укажите aria-sort="ascending" или aria-sort="descending"; атрибут должен находиться именно на заголовке. По рекомендации WAI-ARIA свойство обычно задают только одному заголовку одновременно, для текущей активной сортировки. Оно сообщает состояние вспомогательным технологиям, но само не выполняет сортировку.

Пример подхода и поведения кнопки можно сверить с примером сортируемой таблицы W3C WAI, а допустимые значения свойства — со спецификацией WAI-ARIA 1.2. Не добавляйте aria-sort на все колонки сразу: это превращает одно активное состояние в несколько конкурирующих объявлений.

Кнопка должна получать клавиатурный фокус и реагировать на стандартные клавиши кнопки. Видимый фокус не убирайте ради чистого макета; проверьте контраст индикатора и читаемость увеличенного текста. Поддерживайте текстовую подпись действия для экранного диктора, особенно если видимый индикатор — только стрелка. WAI APG демонстрирует кнопку в заголовке и перенос aria-sort к новому активному полю при смене колонки. Проверьте готовую реализацию с реальными сочетаниями браузера и вспомогательной технологии: сам пример W3C предупреждает, что поддержку стоит тестировать.

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

Проверка должна включать экран ноутбука, узкое окно и масштабирование. Длинное имя столбца может скрыть индикатор, а фиксированная шапка — перекрыть фокус. Убедитесь, что состояние не исчезает при горизонтальной прокрутке и что после сортировки пользователь не теряет ориентацию в таблице. Если серверная сортировка запускается долго, прогресс и ошибка должны быть связаны именно с выбранным действием.

Стрелка без названия поля. Когда таблица горизонтально прокручивается или заголовок обрезан, человек перестаёт понимать, к какой колонке относится индикатор. Держите стрелку рядом с названием и не отделяйте их визуально.

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

Цвет как единственная подсказка. Пользователь с нарушением цветового зрения или в монохромном режиме не отличит активную колонку. Используйте форму, текст, расположение и контраст вместе.

Показ стрелки до подтверждения сервера. После отказа запроса экран и таблица противоречат друг другу. Согласуйте состояние заголовка с фактически применённым порядком и предусмотрите сообщение об ошибке.

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

Сам знак не универсален для всех типов данных. Зафиксируйте правило в продукте: например, вверх — по возрастанию, вниз — по убыванию, а для дат уточните, что считается первым. Название действия или доступная подсказка снимает двусмысленность.

Определите порядок по рабочему процессу и примените его последовательно. Если порядок отражает этапы «Новый», «В работе», «Готов», объясните это словами. Алфавитная сортировка может быть доступна как отдельный режим, но не должна подменять бизнес-логику.

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

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

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

Хорошая сортировка делает видимыми поле, направление и правила для спорных значений. Сначала задайте предсказуемую модель данных, затем покажите её кнопкой, индикатором и aria-sort, а после проверьте клавиатуру, экранный диктор и реальные рабочие сценарии. Для сопроводительной документации или персональных проектов можно подготовить свой рукописный шрифт в Fontgenerator, сохранив ясность подписей в таблицах.