Комментарии 17
Очень крутая статья!
Непонятно. Таблица, карточки. Если для просмотра нужна таблица, то зачем карточки? ИМХО, карточки - превьюшки объектов, а таблица это уже сравнительный анализ этих объектов...
Карточка - это когда есть длиннная. И чтобы не мотать бесконечно на телефоне по горизонтали, с его узким по вертикали экраном, ее переделывают в карточку. Помотал предварительно, нажал по строке и перешел в ее карточный вид.
Очевидно, что пока вы не сталкивались с задачей, вам описание решений не будет понятным в принципе.
Во многих решения выше теряется удобство таблиц в оценке данных по столбцу/колонке (сортировки, медианные значения, суммы и т.д.). Этим и удобны таблицы, что ты можешь смотреть данные как вертикально так и горизонтально.
А в чем эти анимации сделаны?
А по мне - так: важно дать пользователю закрепить те строки и столбцы, которые ему нужны, остальные скроллить.
И выделение активной строки при скролле тоже нужно.
Спасибо за статью. Мне кажется, могут быть еще решения. Например у нас таблица размеров в 50 колонок и 100 строк. Можно ее отобразить целиком в мелком масштабе и сделать к ней линзу. Водишь пальцев и увеличенно видишь.
Также, думаю, можно в условиях уменьшенного масштаба изучаемые строки и столбцы делать чуть крупнее, в 2-3 раза.
Статья, честно говоря, как тот ответ математика из анекдота — абсолютно верная и совершенно бесполезная. Во все эти подходы автоматически упирается каждый, начинающий решать задачу.
Что действительно достоино статьи (и чего ждешь, открывая эту) — это алгоритмы и подходы к автоматическому свертыванию строк таблицы в карточки. Для произвольных или хотя бы удовлетворяющих каким-то условиям таблиц.
Самая лютая таблица, которую мне приходилось делать - таблица с горизонтальным скроллом, первая ее строка - строка заголовков при вертикальном скроле должна прилипать к верхней части экрана, при горизонтальном скроле двигаться одновременно с остальными строками
Хороший материал ?
Отдельно хочется отметить анимированные примеры — это супер наглядно и удобно ?
Хорошая статья. Со всем этим я столкнулась сама, исследовала возможные решения, но в итоге в голове была каша. Эта статья для опытных разработчиков, скорее всего, не откроет нового, но поможет уложить знания в голове. Я даже пересмотрела свои реализованные кейсы - проанализировала, какой вариант из статьи мог бы подойти там лучше всего)
Не нужно переносить таблицу с десктопа на телефон. Нужно посмотреть какие задачи таблица решала на десктопе - и придумать как те же задачи можно хорошо решить на телефоне.
Привет, спасибо за статью. Мне любопытно, где вы создавали демки таблиц для статьи?
Вот заметно более полезная стьять про таблицы, пусть не про mobile first: https://habr.com/ru/company/ozontech/blog/708162/
Публикации
Как отобразить таблицу на экране мобильного устройства: решения