Таблица — основной инструмент работы в учётных системах, кабинетах и админках. Сотрудник проводит в ней рабочий день, и от того, как она устроена, напрямую зависит скорость обработки заказа или обращения. При этом таблицы проектируют по остаточному принципу: выводят все колонки из базы и добавляют сортировку. Разбираем, что должно быть в рабочей таблице, как справляться с большим объёмом и что проверять на приёмке.
Что обязательно должно быть
| Элемент | Зачем нужен |
|---|---|
| Закреплённая шапка | При прокрутке видно, что за колонка перед глазами |
| Сортировка по колонкам | Быстрый доступ к самому старому, самому дорогому, самому свежему |
| Фильтры с сохранением | Не приходится настраивать одно и то же каждое утро |
| Массовые операции | Действие сразу по многим строкам вместо открытия каждой |
| Выбор колонок | У разных ролей разные потребности к одному и тому же списку |
| Экспорт | Данные почти всегда нужны ещё и в отчёте или письме |
| Счётчик найденного | Понятно, сколько строк под фильтром, а не только текущая страница |
| Сохранение позиции | После возврата из карточки список открывается там же, где был |
Последний пункт недооценивают. Возврат в начало списка после каждого просмотра карточки — самая раздражающая мелочь в учётных системах и одновременно самая простая в исправлении.
Как повысить читаемость
- Числа по правому краю, текст по левому. Так столбец сумм читается сверху вниз без усилий.
- Единый формат дат и денег по всей системе. Разные форматы в соседних разделах заставляют перепроверять.
- Моноширинные цифры, чтобы разряды выстраивались друг под другом.
- Не больше 7-9 колонок на экране, остальное — по кнопке настройки.
- Статусы короткими подписями, а не только цветной точкой. Цвет помогает, но не объясняет.
- Длинные значения обрезать с возможностью посмотреть целиком по наведению или в карточке.
- Плотность строк настраиваемая: кому-то нужно видеть больше строк, кому-то комфортнее просторный вид.
- Чередование фона строк либо тонкие разделители — что-то одно, не оба сразу.
Отдельно про пустые значения. Пустая ячейка и ноль означают разное, и это должно быть видно: прочерк для отсутствующего, ноль для нулевого.
Фильтры и поиск
Фильтры используются чаще сортировки, а проектируются хуже. Что важно:
- Видно, какие фильтры применены сейчас, и каждый снимается по отдельности.
- Есть кнопка сброса всех фильтров разом.
- Состояние фильтра отражается в адресе страницы, чтобы им можно было поделиться с коллегой.
- Часто используемые наборы сохраняются как именованные представления.
- Поиск ищет по тем полям, по которым его ожидают: номеру, названию, телефону, а не по всему подряд.
- Поиск устойчив к формату ввода: телефон находится и со скобками, и без.
Если фильтр вернул ноль строк, это должно быть понятным сообщением с подсказкой, что снять, а не пустым экраном.
Что делать с большим объёмом
Тысячи строк нельзя выводить целиком: страница собирается секундами, а браузер начинает подтормаживать при прокрутке. Работают два подхода.
Постраничная выдача предсказуема, позволяет вернуться к конкретной странице и проще в реализации. Подходит для списков, по которым работают последовательно.
Подгрузка по мере прокрутки удобнее для просмотра, но затрудняет возврат к нужному месту и плохо сочетается с массовыми операциями.
Главное в обоих случаях — фильтрация, сортировка и поиск выполняются на сервере. Если данные фильтруются в браузере, всё работает на демонстрации с двумя сотнями строк и разваливается на боевых данных.
Ещё несколько практических вещей:
- Индексы в базе под те поля, по которым идут сортировка и фильтрация. Без них любой список рано или поздно начнёт открываться секундами.
- Ограничение на объём экспорта с формированием файла в фоне и уведомлением о готовности.
- Массовая операция по фильтру, а не только по отмеченным строкам: отмечать вручную триста записей никто не будет.
- Подтверждение массового действия с указанием числа затронутых строк.
Мобильный вариант
Таблица на телефоне либо прокручивается горизонтально внутри своего контейнера с закреплённой первой колонкой, либо перестраивается в карточки с подписями полей. Сжимать колонки до нечитаемого состояния — худший вариант из возможных, потому что формально всё помещается, а пользоваться нельзя.
При перестройке в карточки полезно оставить только те поля, по которым принимается решение, а остальное открывать в карточке записи. Список из карточек с двенадцатью полями листается дольше, чем таблица.
Работа с клавиатуры
Сотрудник, который обрабатывает сотни строк в день, работает быстрее клавиатурой. Минимум, который стоит закладывать:
- Переход между строками стрелками.
- Открытие записи с клавиатуры и возврат назад.
- Фокус в поле поиска по горячей клавише.
- Отметка строки пробелом, диапазон с зажатой клавишей.
- Видимая рамка фокуса, чтобы было понятно, где вы находитесь.
Проверка на приёмке
- Открыть таблицу с реальным объёмом данных и замерить время загрузки, а не смотреть на тестовые двадцать строк.
- Применить несколько фильтров, зайти в запись и вернуться: фильтры и позиция должны сохраниться.
- Подставить длинные названия, пустые значения, отрицательные суммы и посмотреть, не разъезжается ли вёрстка.
- Проверить массовое выделение и отмену действия.
- Пройти основной сценарий с клавиатуры.
- Открыть на телефоне и попробовать найти конкретную запись.
- Выгрузить экспорт и сверить его с тем, что на экране, включая примененные фильтры.
Седьмой пункт стоит отдельного внимания: экспорт, игнорирующий фильтры, приводит к отчётам по неверным данным, и обнаруживается это обычно поздно.
Такие вещи мы прорабатываем на этапе прототипа, до вёрстки и программирования: проектирование пользовательских интерфейсов. Так дешевле договориться о составе колонок и сценариях работы, чем переделывать готовый раздел.
