Фильтры в таблицах
Фильтры в таблицах

Введение

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

В B2B-системах и BI-инструментах фильтр должен быть понятным на вид, но при этом закрывать 95–98% пользовательских сценариев. Он обязан помогать быстро находить ответы, а не превращать поиск данных в отдельный квест.

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

Почему фильтры в больших таблицах так важны

  • Фильтр — это инструмент поиска. Пользователь не читает таблицу построчно, он формулирует запрос и ждёт быстрый ответ: «Клиенты из Центрального региона, заказавшие товар X в июле».

  • Фильтр снижает ошибки. Чем больше данных, тем выше риск пропустить нужное или выбрать не то. С фильтрами человек видит только релевантный срез, а не тонет в «шуме».

  • Фильтр экономит ресурсы. Исследования UX показывают: время поиска информации напрямую влияет на продуктивность. Если сотрудник тратит на ручной скролл лишние 10 минут в день, в компании на 100 человек это выливается в сотни часов впустую.

  • Фильтр = аналитический инструмент. Он не только отсеивает данные, но и помогает строить гипотезы, находить закономерности и принимать решения.


Виды фильтров в интерфейсах B2B

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

  1. Простые фильтры и сортировки
    Чекбоксы, поиск по колонке, выбор диапазона чисел или дат. Хороши там, где данных немного или критерий однозначный. Обычно это быстрые фильтры, которые ставятся прямо в заголовках колонок.

    Пример простого фильтра. ДС Контур.
    Пример простого фильтра. ДС Контур.
  2. Быстрые фильтры (inline)
    Мини-панель над таблицей. Чаще всего это текстовый поиск, чекбоксы, тоглы, дропдауны. Отличие от «простых» в том, что они всегда под рукой и меняются в один клик.

    Пример inline фильтра
    Пример inline фильтра
  3. Комбинированные фильтры
    Несколько полей в одном блоке, часто с зависимыми значениями (например: страна → регион → город).

    Пример комбинированного фильтра, реализованного  чипсами
    Пример комбинированного фильтра, реализованного чипсами
  4. Сложные логические фильтры
    Поддержка AND / OR / NOT, вложенных групп условий. Используются в аналитике, когда нужен точный запрос. Это почти конструктор SQL-запросов.

    Пример фильтра с условиями
    Пример фильтра с условиями
  5. Преднастроенные сценарии (пресеты)
    Фильтры, сохранённые пользователем или администратором.

    1. Личные пресеты: «Мои сделки за неделю», «Мои проекты с дедлайном в этом месяце».

    2. Глобальные пресеты: администратор создаёт фильтры для всей компании. Их нельзя изменить.

    3. Автоматические пресеты: система сама предлагает часто используемые варианты.

      Пример сохраняемого фильтра. Обычно, сохраненные фильтры имеют вид тегов и находятся под инлайн фильтром для быстрого доступа к ним.
      Пример сохраняемого фильтра. Обычно, сохраненные фильтры имеют вид тегов и находятся под инлайн фильтром для быстрого доступа к ним.
  6. Визуальные фильтры
    Фильтрация через элементы визуализации: выбор диапазона на графике, фильтр по карте, слайдер по времени. Удобны для BI и аналитики.

    Пример Суточно.ру - карта служит не только для отображения объектов, но и является фильтром. При увеличение масштаба кол-во вариантов будет увеличиваться, при уменьшение масштаба - наоборот.
    Пример Суточно.ру - карта служит не только для отображения объектов, но и является фильтром. При увеличение масштаба кол-во вариантов будет увеличиваться, при уменьшение масштаба - наоборот.
  7. Глобальный фильтр для всей системы
    Иногда фильтр влияет не только на таблицу, но и на все связанные модули: графики, дашборды, карточки.

    Пример глобального фильтра
    Пример глобального фильтра

UX-подход к сложным фильтрам

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

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

  2. Прятать сложное — показывать простое
    Продвинутые настройки лучше убирать в модалку/дровер, рядом с таблицей показывать только кнопку «Расширенный фильтр». Пусть пользователь сначала освоит базовые сценарии.

  3. Автоприменение или кнопка «Применить»?
    Автоприменение экономит клики, но при больших объёмах данных может тормозить систему. Кнопка «Применить» позволяет собрать условия и выполнить запрос одним действием. Об этом ниже.

  4. Чёткая индикация активных фильтров
    Бейджи со счётчиками, подсветка иконок, панель «Активные фильтры», кнопка «Сбросить всё». Пользователь должен видеть, что таблица уже отфильтрована.


Техническая кухня глазами дизайнера

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

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

Вопрос

Что значит

Зачем дизайнеру

Где будет происходить фильтрация: в браузере или на сервере?

Обработка данных делается на клиенте (быстро, но ограничено) или на сервере (медленнее, но можно хоть миллионы строк).

Понять: нужен ли лоадер, кнопка «Применить», ограничения по объёму данных.

Можно ли сохранять состояние фильтров в URL или локальном хранилище?

Будут ли фильтры «запоминаться» после перезагрузки и можно ли делиться ссылкой с коллегой.

Решить: делать ли «Скопировать ссылку» и кнопку «Сбросить фильтры».

Есть ли лимиты на количество значений в мультиселекте?

Можно ли выбрать хоть 500 опций, или есть ограничение (например, 20).

Спроектировать UI: показывать счётчик, предупреждение об ограничении, или заменять список поиском.

Как быстро бэк отдаёт уникальные значения для фильтра?

Сколько времени займёт сбор distinct-списка для выпадашки (например, список поставщиков).

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

Как обрабатываются долгие запросы: частичная подгрузка или всё сразу?

Сервер отдаёт данные кусками или ждёт, пока соберёт полный результат.

Понять: нужен ли skeleton/прогресс-бар, кнопка «Показать ещё», возможность отмены запроса.

Есть ли ограничения по датам и форматам?

С какого периода реально есть данные, какие форматы поддерживаются (2025-07-01 или 01.07.2025).

Не рисовать «с начала времён», предусмотреть поддержку локалей.

Как обрабатываются пустые значения и null?

Можно ли фильтровать по «ничего нет» (например, клиенты без e-mail).

Добавить отдельную опцию «Пустые» или checkbox.

Поддерживаются ли сложные условия (AND / OR / NOT)?

Можно ли строить логические группы фильтров или только простые.

Не рисовать конструктор условий, если бэк его не умеет.


О чём часто забывают

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

1. Фильтрация по пустым значениям

Иногда важно найти записи, где поле не заполнено — например, клиенты без контактного телефона или товары без штрихкода.

2. Мультиформатные даты и время

Если у пользователей разные локали или привычки ввода (12/07/2025 vs 07.12.2025), фильтр должен понимать оба варианта.

3. Несколько фильтров на один столбец

Иногда нужно отфильтровать «> 100» и «только за июль» по одному показателю. Если фильтр поддерживает только одно условие на колонку, приходится городить костыли.

4. Сложные зависимости между фильтрами

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

5. Индикация того, что фильтр не дал результатов

Если в таблице ничего не осталось, пользователь должен видеть понятное сообщение, а не пустой экран. Не забывайте про Empty state.


Заключение

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

Хороший фильтр:

  • экономит часы работы,

  • снижает количество ошибок,

  • помогает находить инсайты,

  • делает работу с большими таблицами быстрой и предсказуемой.

Поэтому если в задаче появится строчка «сделать фильтр», не думайте, что это «просто». Это маленькая, но важная аналитическая машина, от которой зависит, будет ли пользователь работать в системе с удовольствием или снова открывать старый Excel.

Если вам зашёл разбор про фильтры и вообще тема B2B-дизайна, подписывайтесь на мой канал ? Дизайн в B2B. Там пишу про сложные интерфейсы, дизайн-мышление в корпоративных системах и иногда про жизнь дизайнера «после 40». Всё просто, без пафоса и с юмором.

Комментарии (0)