![](https://habrastorage.org/getpro/habr/upload_files/ca1/d30/428/ca1d30428406ec2056862ccf7906e4d2.png)
В данной статье мы рассмотрим какие существуют решения по отображению таблиц с большими массивами данных на экранах мобильных устройств.
Таблица
Допустим, есть стандартная таблица, состоящая из строк, столбцов и ячеек.
Для правдоподобности загрузим интерфейс чекбоксами для выбора строк, поисковиком, фильтром и доп. настройками, а также постраничной навигацией.
![Таблица Таблица](https://habrastorage.org/getpro/habr/upload_files/ee5/916/fba/ee5916fba12ae89b859bd5811924d3bd.png)
Далее, давайте разберемся какие существуют способы адаптировать данную таблицу под экраны смартфонов.
Решение 1. Скролл
Самое простое и распространенное решение - добавить в таблицу возможность горизонтальной прокрутки содержимого.
При этом названия строк при горизонтальном скролле и названия столбцов при вертикальном сколле лучше сделать фиксированными, чтобы всегда знать какие данные мы просматриваем в текущий момент.
Также, первый столбец с названиями строк лучше сделать меньше по ширине, отдавая предпочтение в пространстве остальным столбцам.
![Решение 1. Скролл Решение 1. Скролл](https://habrastorage.org/getpro/habr/upload_files/89e/230/063/89e23006366c8b02623dbedcc15b6131.gif)
Решение 2. Слайдер
Данное решение во многих моментах аналогично решению со скроллом, однако в этом случае данные таблицы не прокручиваются в свободном режиме, а отображаются по одному столбцу и пролистываются при свайпе.
Переход к определенному столбцу происходит с помощью навигации посредством выбора названия интересующего столбца.
![Решение 2. Слайдер Решение 2. Слайдер](https://habrastorage.org/getpro/habr/upload_files/05c/b9e/cc4/05cb9ecc4f7762072e4bec3f50a1748e.gif)
Решение 3. Карточки
Этот способ заключается в трансформации таблицы и отображении её в виде списка отдельных карточек, в каждой из которых содержатся данные по соответствующей строке.
![Отображение данных в две колонки (для коротких значений) Отображение данных в две колонки (для коротких значений)](https://habrastorage.org/getpro/habr/upload_files/19a/be1/ff5/19abe1ff53c58e6af4d6a4b1f5176590.gif)
![Отображение данных построчно (для объемных значений) Отображение данных построчно (для объемных значений)](https://habrastorage.org/getpro/habr/upload_files/46e/4bc/584/46e4bc5842e9a77746ec28b315eb6ae0.gif)
Решение 4. Блоки с раскрывающимся контентом
В данном случае подобно примеру выше, таблица преобразуется в список отдельных блоков, однако изначально в блоке отображено только название строки, а значения по данной строке скрыты и показываются по клику.
![Отображение данных в две колонки (для коротких значений) Отображение данных в две колонки (для коротких значений)](https://habrastorage.org/getpro/habr/upload_files/d0d/2ab/043/d0d2ab043bd208f1813107649a36df56.gif)
![Отображение данных построчно (для объемных значений) Отображение данных построчно (для объемных значений)](https://habrastorage.org/getpro/habr/upload_files/589/48e/ccd/58948eccdac943993043ee93ed569b3f.gif)
Решение 5. Детальный просмотр
Данный способ отображения таблицы также похож на рассмотренные выше, но здесь после совершения клика все данные по строке можно просмотреть в отдельном пространстве.
Такое решение может быть использовано, например, при больших объемах данных в таблице.
![Отображение данных в две колонки (для коротких значений) Отображение данных в две колонки (для коротких значений)](https://habrastorage.org/getpro/habr/upload_files/c69/bf8/105/c69bf81057bd19a404edd73b10e27ca0.gif)
![Отображение данных построчно (для объемных значений) Отображение данных построчно (для объемных значений)](https://habrastorage.org/getpro/habr/upload_files/ed0/57a/ad4/ed057aad42263da5d0c4b2d6a5d5d503.gif)
Решение 6. Слайдер карточек
Трансформация таблицы в слайдер, состоящий из карточек с данными, где каждая карточка соответствует отдельной строке таблицы и содержит значения по данной строке.
Навигация в слайдере осуществляется аналогично рассмотренному ранее решению со слайдером столбцов, но в данном случае для перехода к определенной карточке вместо названия столбца выбирается название строки.
В силу отображения данных не списком, а посредством горизонтального слайдера, чекбоксы для множественного выбора строк вынесены в отдельную вкладку.
![Отображение данных в две колонки (для коротких значений) Отображение данных в две колонки (для коротких значений)](https://habrastorage.org/getpro/habr/upload_files/ca4/f0f/b4c/ca4f0fb4cfd2056e0a03ffdd8e82adb6.gif)
![Отображение данных построчно (для объемных значений) Отображение данных построчно (для объемных значений)](https://habrastorage.org/getpro/habr/upload_files/813/7db/fa2/8137dbfa2337f6996224b5d406bfa9fd.gif)
Заключение
Нужно понимать, что при адаптировании таблиц под маленькие экраны мобильных устройств не существует какого-либо одного универсального решения, которое можно было бы постоянно использовать.
Каждый случай уникален и зависит от типа таблицы, её объема данных, а также от задач, которые таблица должна решать перед пользователями.