Убиваем горизонтальный скролл: решения для таблиц с 100+ столбцами

Таблица с сотней столбцов — это не баг, а типичный B2Bшный интерфейс. Но что делать, если пользователь хочет видеть сразу все, при этом не мотать таблицу влево-вправо с помощью скролла?
Поделюсь своими методами решения этой проблемы:

🔹 Сводка + раскрытие по клику
Показываем только ключевые столбцы(5-8), остальное прячем во вложенный контейнер, который отображается при клике. Такой метод экономит экранное пространство и снижает когнитивную нагрузку.
🔹 Транспонирование таблицы
Поворачиваем таблицу «на бок»: строки становятся столбцами, а столбцы — строками. Применимо, когда записей мало, но у каждой — десятки параметров. Например, карточка товара или сотрудника. Давно хотела реализовать, но кейсов таких еще не попадалось. Потому что сотрудников обычно не 3, а 1003, товары тоже исчисляются тысячами.
🔹 Карточный режим вместо таблицы
Каждая строка превращается в отдельную карточку. Это удобно на мобильных устройствах или при вертикальной прокрутке. Карточки можно свернуть до важного и раскрывать по клику. Один из моих любимых способов, но тут главное — хорошо сформировать карточку, чтобы данные считывались быстро и не было каши из них.
🔹 Группировка столбцов
Объединяем колонки по смыслу: «Контакты», «Доставка», «Финансы». В интерфейсе это может быть:
— вкладки над таблицей,
— аккордеоны в строках,
— кнопки "показать группу".
Пользователь переключается между группами и видит только нужный блок полей.
🔹 Шаблоны отображения (пресеты)Готовые сценарии отображения колонок под разные роли:
— «Бухгалтер»: финансы и документы
— «Менеджер»: заказы и статусы
— «Все поля» — для тех, кто любит боль
Пресеты можно сделать фиксированными (на стороне продукта) или настраиваемыми (чтобы пользователь сам сохранял нужные виды). Не подходит, если все 100 столбцов предназначены для одной роли.
А если всё-таки нужен горизонтальный скролл — сделай его удобным: фиксируй важные колонки, добавь быстрые кнопки прокрутки, сделайте скролл сверху и снизу.

📬 Подписывайтесь на мой блог Лиана Семенова | Дизайн в B2B — пишу про дизайн сложных интерфейсов, боли, радости и всё, что между.