Vue шаг за шагом. Таблица - трансформер под настольные и мобильные версии. Пример#7

19.03.2020

Таблица - трансформер

В этом примере продолжаем дорабатывать компонент client.

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

Чтобы реализовать такую универсальную таблицу я сделал компоненты u-table, u-tr, u-th, u-td

И использую их вместо тегов table, tr, th, td соответственно. Вот и все.

Сделайте окно браузера меньше до ширины мобильного телефона :) и посмотрите как преобразуется таблица. Заголовок табличных колонок в мобильной версии исчезает - он не имеет смысла, сортировка теперь доступна в меню таблицы. Вот зачем мы делали меню таблицы в предыдущем примере.

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

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

Ссылки

Bootstrap: https://getbootstrap.com/docs/4.4/getting-started/introduction/

Резюме

В этом примере сделан адаптивный дизайн для вывода табличных данных используя возможности Bootstrap. Таблица - трансформер подстраивается под настольные или мобильные устройства автоматически.