В данной статье мы рассмотрим какие существуют решения по отображению таблиц с большими массивами данных на экранах мобильных устройств.


Таблица

Допустим, есть стандартная таблица, состоящая из строк, столбцов и ячеек.

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

Таблица
Таблица

Далее, давайте разберемся какие существуют способы адаптировать данную таблицу под экраны смартфонов.


Решение 1. Скролл

Самое простое и распространенное решение - добавить в таблицу возможность горизонтальной прокрутки содержимого.

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

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

Решение 1. Скролл
Решение 1. Скролл

Решение 2. Слайдер

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

Переход к определенному столбцу происходит с помощью навигации посредством выбора названия интересующего столбца.

Решение 2. Слайдер
Решение 2. Слайдер

Решение 3. Карточки

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

Отображение данных в две колонки (для коротких значений)
Отображение данных в две колонки (для коротких значений)
Отображение данных построчно (для объемных значений)
Отображение данных построчно (для объемных значений)

Решение 4. Блоки с раскрывающимся контентом

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

Отображение данных в две колонки (для коротких значений)
Отображение данных в две колонки (для коротких значений)
Отображение данных построчно (для объемных значений)
Отображение данных построчно (для объемных значений)

Решение 5. Детальный просмотр

Данный способ отображения таблицы также похож на рассмотренные выше, но здесь после совершения клика все данные по строке можно просмотреть в отдельном пространстве.

Такое решение может быть использовано, например, при больших объемах данных в таблице.

Отображение данных в две колонки (для коротких значений)
Отображение данных в две колонки (для коротких значений)
Отображение данных построчно (для объемных значений)
Отображение данных построчно (для объемных значений)

Решение 6. Слайдер карточек

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

Навигация в слайдере осуществляется аналогично рассмотренному ранее решению со слайдером столбцов, но в данном случае для перехода к определенной карточке вместо названия столбца выбирается название строки.

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

Отображение данных в две колонки (для коротких значений)
Отображение данных в две колонки (для коротких значений)
Отображение данных построчно (для объемных значений)
Отображение данных построчно (для объемных значений)

Заключение

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

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

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


  1. GreatFix
    23.11.2022 04:03

    Очень крутая статья!


  1. Toshykan
    23.11.2022 16:22

    Непонятно. Таблица, карточки. Если для просмотра нужна таблица, то зачем карточки? ИМХО, карточки - превьюшки объектов, а таблица это уже сравнительный анализ этих объектов...


    1. AirLight
      24.11.2022 00:52
      +1

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

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


  1. Zulkarnai
    23.11.2022 16:22
    +3

    Во многих решения выше теряется удобство таблиц в оценке данных по столбцу/колонке (сортировки, медианные значения, суммы и т.д.). Этим и удобны таблицы, что ты можешь смотреть данные как вертикально так и горизонтально.


    1. AirLight
      24.11.2022 00:53
      +1

      В телефоне никак не будет удобно рассматривать таблицу в которой 20-30 колонок, или вдруг даже 50.


  1. ahhilless
    23.11.2022 16:22
    +4

    А в чем эти анимации сделаны?


    1. serafims
      23.11.2022 22:46
      -1

      думаю, в Adobe animate можно и в в after effects.


  1. serafims
    23.11.2022 22:45

    А по мне - так: важно дать пользователю закрепить те строки и столбцы, которые ему нужны, остальные скроллить.

    И выделение активной строки при скролле тоже нужно.


  1. AirLight
    24.11.2022 00:56

    Спасибо за статью. Мне кажется, могут быть еще решения. Например у нас таблица размеров в 50 колонок и 100 строк. Можно ее отобразить целиком в мелком масштабе и сделать к ней линзу. Водишь пальцев и увеличенно видишь.


  1. AirLight
    24.11.2022 00:58

    Также, думаю, можно в условиях уменьшенного масштаба изучаемые строки и столбцы делать чуть крупнее, в 2-3 раза.


  1. Codenamed
    24.11.2022 02:26
    +2

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

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


  1. propellersebastian
    25.11.2022 10:27

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


  1. everest_ux
    25.11.2022 10:27

    Хороший материал ????
    Отдельно хочется отметить анимированные примеры — это супер наглядно и удобно ????


  1. Spanri
    25.11.2022 14:41

    Хорошая статья. Со всем этим я столкнулась сама, исследовала возможные решения, но в итоге в голове была каша. Эта статья для опытных разработчиков, скорее всего, не откроет нового, но поможет уложить знания в голове. Я даже пересмотрела свои реализованные кейсы - проанализировала, какой вариант из статьи мог бы подойти там лучше всего)