Таблицы

Простая таблица

Шире, чем комната

Таблица с действиями

Полосатые строки, подсвеченные под указателем

Строки, которые можно отметить

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

Файлы, всего, действие для каждой строки

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

Фильтры

Полоса фильтров в верхней части таблицы, по одному неприметному меню на каждую, указывающая, к чему она сужает, как только это делает. На сервере они живут в запросе страницы — каждый вариант является ссылкой — и контроллер сужает строки из него; в vue они являются значением, переданным странице для ее api, или применяются таблицей к уже имеющимся строкам. Каждый вариант — это коробка — круглая для выбора одного — окрашенная по своему оттенку, если он есть, статусу или категории.

Сортировка

Заголовок, который сортирует, является ссылкой на сервер и кнопкой в vue: по возрастанию, по убыванию, затем возвращается к порядку, который была объявлен на странице, с которым открывается список и который его стрелка показывает с самого начала. Пустые даты идут последними в обоих направлениях, а имена сравниваются так, как их упорядочивает язык. Здесь таблица сортирует строки, которые были даны ей самой; контроллер, пейджингующий свой список, читает тот же запрос.

Сортировка в браузере, из twig

`vue: true` передает те же столбцы и строки двойнику vue: он сортирует и ищет весь список в браузере, без загрузки страницы. Для списка, который страница удерживает целиком — короткого или того, который не обслуживает api.

Действия в выборе

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

Ячейки со ссылками и значками

Состояние загрузки

Пустое состояние

Выравнивание колонок

Коды, цифры и итоги

`cell: 'code'` устанавливает идентификатор в моноширинном шрифте; `cell: 'number'`, или `unit`, записывает цифру в локали страницы. `negative: true` рисует цифру ниже нуля в ошибочном тоне, ее знак минус говорит об этом тоже. `totals` — это строка, которую страница передает, отображаемая под другими — таблица ничего не складывает, удерживая одну страницу или отфильтрованный список. Создано сервером, затем vue.

Из Markdown

Таблица, написанная в Markdown и обработанная через `markdown_ds`: колонки, их выравнивание и разметка каждой ячейки считываются из документа, и таблица отображается здесь как любая другая. `markdown` сохраняет обычный `<table>`, для всего, что не является страницей — письмом, лентой.

Группировать строки

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

Ячейки состояния

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

Липкий заголовок

Длинную таблицу читают по колонкам также, как и по строкам. С `sticky` заголовок остается на виду, пока строки прокручиваются под ним; страница с чем-то своим, прикрепленным вверху, показывает, насколько далеко вниз в `--table-sticky-top`.

Таблица в своей зоне

Зоне `zone--table` отводится место под всю таблицу: что ведет ее сверху, ее страницы внизу, из того, что прокручивается, и между ними основание таблицы, доходящее до дна зоны, даже для трех строк. В нее помещается любая таблица, созданная сервером или vue. С `natural`, как та, что слева, таблица сохраняет ширину своих столбцов, не растягиваясь и не сжимаясь.

Таблица сущностей Vue

Таблица Vue с выбором

Тот же контракт на клиенте: отмеченные ключи возвращаются через v-model:selected, каждое действие выдается как bulk-action, а одно с адресом отправляется по мере того, как серверная таблица его отправляет. У них ничего нет, поэтому строка ниже говорит о том, что было бы сделано. Три строки на странице, всего в конце полосы и Архивировать все, не требуя ничего отмеченного.

Пагинация без общего количества

Когда API не возвращает общего количества, пейджер откатывается к предыдущему/следующему.

Пагинация, созданная сервером

`pagination(page, pages_count)` создает страницы списка в виде ссылок: каждая сохраняет маршрут и запрос страницы, на которой находится — поиск, сортировка — и изменяет только `page`, считая с 1. Показанные номера — это номера vue пейджера: первый, последний, текущий и его соседи. `compact` сохраняет предыдущий и следующий вокруг номера страницы; `route` и `params` переходят по другому адресу.

Форматировщики дат Vue