Фильтры в таблице: как показать условия выборки и вернуть полный список

Фильтры в таблице должны сообщать не только, что часть строк скрыта, но и почему это произошло. Покажите активные условия рядом с результатом, обозначьте область их действия и дайте понятный способ снять выборку. Тогда человек сможет проверить, какие данные он видит, изменить условие и вернуться к исходному списку без догадок и потери работы.
Что именно должен объяснить фильтр
Фильтр отвечает на вопрос «какие строки сейчас подходят условию?», а интерфейс обязан дополнить ответ контекстом: какие условия включены, сколько записей осталось и к какой совокупности применяется отбор. Например, в таблице заявок выбор «Статус: ожидает» вместе с периодом «за месяц» означает пересечение двух ограничений. Если пользователь заметил только одно, он может принять неполный список за весь архив.
Разделите в интерфейсе три вещи: само условие, его область и результат. Условие — «Статус: ожидает»; область — все заявки команды или только открытая вкладка; результат — 18 из 240 записей. Не обязательно помещать всё в один сложный элемент. Чипы активных фильтров, короткая строка над таблицей и счётчик могут работать вместе, если каждый отвечает за свою часть.
Полезная строка состояния выглядит так: «18 заявок из 240 · Статус: ожидает · Период: 1–30 сентября». Числа в примере иллюстративны: в продукте нужно брать реальный размер исходной выборки и результат текущего запроса. Если полный объём неизвестен, не подменяйте его оценкой — покажите «18 найдено» либо честное «показаны первые 18 результатов».
Сначала решите, какие фильтры стоит показывать
Не превращайте каждую колонку в обязательный фильтр. Выберите поля, по которым человек регулярно принимает решение или сужает список: статус, период, ответственный, категория, регион. Для редких условий может подойти меню «Ещё фильтры». Важнее не количество контролов, а возможность понять выборку без повторного открытия всех меню.
У каждого условия должны быть читаемое название и выбранное значение. Чип «Дата: 01.09–30.09» объясняет себя лучше, чем «Дата» с незаметно заданным диапазоном внутри закрытого календаря. Для простого состояния подойдёт короткое «Регион: Урал»; для сложного правила полезно показать оператор: «Сумма больше 10 000 ₽». Если значений много, укажите число выбранных элементов и дайте раскрыть полный перечень.
Фильтры могут объединяться по-разному. Часто разные поля соединяются логикой «и»: одновременно выбранные период, статус и регион должны выполняться вместе. Несколько значений одного поля могут означать «или»: показать заявки со статусом «новая» или «в работе». Не заставляйте читателя выводить эту логику из результата. Подпись или краткое пояснение рядом с группой снимет неоднозначность, особенно когда набор условий составлен в конструкторе.
Покажите активные условия рядом с данными
Активный фильтр должен оставаться видимым после закрытия меню. Разместите чипы между панелью управления и таблицей, рядом со счётчиком либо в компактной строке состояния. Важно, чтобы они не выглядели как декоративные метки: пользователь должен отличить включённое условие от доступного, но пока не выбранного фильтра.
Каждый чип можно сделать точкой изменения или удаления одного условия. Например, нажатием на «Статус: ожидает» открывается соответствующий список, а отдельная кнопка с понятным доступным названием снимает только этот фильтр. Если форма чипа тесная, используйте меню при активации и отдельную команду «Сбросить все». Не полагайтесь только на маленький крестик: без текстовой подсказки его назначение трудно понять, а для клавиатуры и средств озвучивания нужна доступная метка.
Для большого количества условий не обрезайте их молча. Покажите несколько наиболее важных, затем ссылку или кнопку «Ещё 4», которая раскрывает остальные. Сохраните в свёрнутом виде хотя бы краткий признак, что выборка ограничена. Например, «Фильтры: 6» не объясняет значения, но предупреждает, что список неполный; при раскрытии пользователь получает сами условия.
Свяжите фильтры со счётчиком и заголовком таблицы
Покажите количество найденных строк после применения фильтров и обозначьте, к чему относится число. Надпись «18 результатов» полезнее одинокого «18», но ещё яснее «18 из 240 заявок». Если таблица загружает результаты частями, различайте количество найденного и количество уже показанного: «Показано 50 из 386» не создаёт впечатления, будто в выборке всего 50 строк.
Счётчик должен обновляться вместе с данными. Если пользователь меняет несколько условий в форме и нажимает «Показать», не показывайте новый итог заранее. Если фильтрация выполняется сразу, обозначьте обновление и не оставляйте старое число рядом уже с новыми строками. Во время загрузки допустимо временно сохранить старую таблицу, но визуально отметьте, что идёт обновление, чтобы значения не воспринимались как ответ на новое условие.
Укажите область поиска в заголовке или подсказке: «12 из 80 строк текущего проекта» или «Найдено среди архивных и активных записей». Смена вкладки нередко меняет исходный набор, а фильтр может сохраниться. Если текущая выборка перешла на другую вкладку, обновите подпись области. Если условия сброшены при переходе, сообщите об этом, особенно когда переход вызван действием самого интерфейса.
Сделайте возврат к полному списку предсказуемым
Предусмотрите два масштаба сброса. Команда у конкретного чипа снимает одно условие, сохраняя остальные. Команда «Сбросить фильтры» убирает все условия, заданные пользователем, и возвращает таблицу к исходному набору текущего раздела. Название должно описывать действие, а не обещать сброс сортировки, выделения и других настроек, если они сохраняются.
Если фильтров несколько и форма сложная, полезна пара кнопок «Сбросить» и «Показать результаты». В таком случае объясните, применяется ли изменение сразу или только после подтверждения. Не смешивайте сохранение условий и обновление строк: можно изменить значения и забыть нажать кнопку, а затем решить, что интерфейс проигнорировал фильтр. Под кнопкой или рядом с панелью уместно короткое состояние «Есть несохранённые условия», когда оно соответствует поведению формы.
После очистки дайте понятную обратную связь: обновлённое количество, исчезнувшие чипы и, если уместно, краткое сообщение «Показаны все записи проекта». Не отправляйте человека в другой раздел и не восстанавливайте набор, отличный от ожидаемого. Если один фильтр был частью обязательной области — например, архив открыт отдельной вкладкой, — обозначьте, что сбрасываются только пользовательские условия, а вкладка остаётся прежней.
Продумайте нулевой результат
Пустая таблица может означать как отсутствие данных, так и слишком строгие условия. Это разные ситуации. При нулевом результате из-за фильтров сообщите об этом прямо: «По выбранным условиям заявок нет». Покажите текущие условия и предложите снять одно из них или сбросить все. Не ограничивайтесь пустым прямоугольником или общей фразой «Ничего не найдено», когда известно, что результат сформировали именно фильтры.
Если данных в разделе пока нет даже без фильтров, предложите следующий шаг, соответствующий продукту: создать запись, импортировать таблицу либо выбрать другой раздел. Не показывайте команду «Сбросить фильтры», если активных условий нет. Когда данных нет из-за ошибки загрузки, отделите ошибку от корректного нулевого результата: состояние должно позволять повторить запрос, а не убеждать пользователя, что записей не существует.
Для пустого результата проверьте сочетание условий, а не только каждое по отдельности. По отдельности регион и статус могут давать строки, но вместе — ни одной. Сообщение может перечислить условия, не вынося обвинительный вердикт: «Нет заявок со статусом “ожидает” в выбранном периоде». Рядом можно предложить снять период или очистить фильтры.
Сохранение выборки и возврат после навигации
Решите, должен ли фильтр оставаться при переходе со страницы таблицы к карточке записи, назад, на соседнюю вкладку или после перезагрузки. Последовательное сохранение экономит повторные действия, но скрытое сохранение может удивить: человек открывает раздел позже и видит не весь список. Сохранённые условия требуют заметного сигнала — чипов, подписи или явной команды «Вернуться ко всем».
Если выборка кодируется в адресе страницы, пользователь может сохранить ссылку или поделиться конкретным состоянием, но параметры должны быть понятными и не включать чувствительные данные. Для временной рабочей сессии может хватить сохранения в пределах навигации. Не обещайте одинаковое поведение на всех устройствах, если настройки пользователя не синхронизируются.
Проверьте возврат кнопкой браузера: восстановились ли условия, счётчик, страница пагинации и выделение строк в согласованном состоянии? Например, сохранение страницы 8 при изменении фильтра способно привести к пустому экрану, хотя подходящие записи есть на первой странице. При существенном изменении выборки обычно разумно возвращаться к началу результатов и показывать обновлённое состояние.
Пример для таблицы заявок
Представим рабочий список со столбцами «Номер», «Клиент», «Регион», «Ответственный», «Статус» и «Дата». Пользователь выбирает «Статус: ожидает», «Регион: Урал» и период текущего месяца. Интерфейс оставляет условия над данными, сообщает «7 из 240 заявок» и показывает строки, удовлетворяющие всем трём условиям.
Пользователь замечает, что нужен соседний регион. Он меняет значение в чипе региона; два остальных условия остаются, таблица обновляется, счётчик пересчитывается. Если строк нет, интерфейс сохраняет условия, говорит, что совпадений нет, и предлагает убрать регион или сбросить всё. Команда у фильтра статуса уберёт только статус. Общая команда вернёт полный набор заявок в текущем разделе.
В этой последовательности каждое действие должно быть обратимым и видимым. Не очищайте все фильтры по клику на один чип. Не скрывайте период в закрытом меню. Не обновляйте счётчик раньше строк. Если в списке показывается только первая страница, подпись должна различать совпадения во всей выборке и строки, находящиеся на экране.
Чеклист перед выпуском
- Назовите каждое активное условие понятным текстом и покажите выбранное значение.
- Обозначьте, к какому разделу или набору данных относится выборка.
- Подпишите счётчик: найдено, показано или общее число записей.
- Проверьте логику сочетания нескольких полей и значений внутри одного поля.
- Дайте снять отдельный фильтр, изменить его и сбросить все условия.
- Сообщите, применяются ли изменения сразу или после команды подтверждения.
- Покажите отдельные состояния для нулевого результата, пустого раздела и ошибки загрузки.
- Проверьте длинные значения, множество фильтров, узкий экран и навигацию с клавиатуры.
- Проверьте поведение при переходе в карточку, возврате назад, смене вкладки и обновлении страницы.
- Сверьте строки, счётчик и состояние загрузки после быстрой смены условий.
Частые ошибки
Спрятать активные условия в закрытой панели. Человек видит урезанный набор строк, но не знает причину. Оставьте чипы или строку состояния на виду.
Показать только число без области. «12» может означать найденные, видимые или выделенные записи. Подпишите, какие именно это строки и относительно какого набора их посчитали.
Сделать один «сброс» для разных действий. Снятие одного условия не должно случайно убирать остальные или переключать раздел. Разделите точечное удаление и полную очистку пользовательских фильтров.
Не различать нулевой результат и отсутствие данных. Это разные причины и разные следующие действия. Сообщите, что данные существуют, но выбранные условия ничего не оставили, если система располагает такой информацией.
Сохранить старый счётчик при новых строках. На время загрузки согласуйте визуальное состояние таблицы и количества, а после ответа обновите их одновременно.
Сбрасывать контекст молча. Если фильтр исчезает при переходе, вкладка меняется автоматически или пагинация возвращается в начало, покажите ожидаемое изменение в интерфейсе.
Часто задаваемые вопросы
Где лучше размещать активные фильтры?
Разместите их непосредственно над таблицей или рядом со счётчиком результатов, чтобы условия были видны одновременно с данными. Если их много, сверните второстепенные за командой «Ещё», оставив заметный сигнал об активном отборе. Не заставляйте открывать каждое меню только для проверки текущего значения.
Нужно ли показывать все фильтры сразу?
Показывайте постоянно те условия, которые влияют на повседневные решения и легко меняются: статус, период или ответственного. Редкие условия можно поместить в дополнительную панель. Активное значение из скрытой панели всё равно следует вывести рядом с результатом.
Чем отличается «сбросить фильтр» от «сбросить всё»?
Удаление одного фильтра снимает только выбранное условие, остальные сохраняются. Полная очистка убирает все пользовательские условия для текущего набора данных. Подпись команды должна точно отражать, очищаются ли также сортировка, вкладка и выделение строк.
Надо ли показывать число записей до фильтрации?
Покажите его, если исходное число достоверно и помогает понять масштаб выборки: «18 из 240». Если сервер не знает точное общее число или загружает результаты частями, не создавайте ложную точность; напишите «18 найдено» или «показаны первые 18».
Что писать, если фильтры не нашли строк?
Скажите, что совпадений по выбранным условиям нет, и покажите сами условия. Предложите изменить одно условие или сбросить выборку. Если раздел действительно пуст без фильтров, предложите действие для создания или добавления данных.
Сохранять ли фильтры после перехода на другую страницу?
Сохраняйте выборку, когда возвращение к прежнему месту важно для задачи, и делайте её видимой после возврата. Если при смене раздела условия очищаются, обозначьте это поведение. Скрытый фильтр, который живёт дольше ожидаемого, может заставить принять частичный список за полный.
Когда обновлять счётчик — сразу или после нажатия кнопки?
При мгновенной фильтрации пересчитывайте число вместе с обновлением строк. В форме с кнопкой «Показать» применяйте оба изменения после подтверждения. Во время ожидания явно покажите загрузку и не выдавайте прежнее число за результат новых условий.
Итог
Фильтры полезны, когда таблица раскрывает границы выборки: активные условия остаются заметными, их область и результат подписаны, а возврат к полному списку предсказуем. Пройдите этот путь на реальном наборе записей и проверьте также пустой результат. Если вы разрабатываете собственный рукописный шрифт для рабочих таблиц, создайте его на Fontgenerator и проверьте цифры, подписи и служебные обозначения в одном макете.