VGTable
Динамические таблицы
Базовая таблица
Статическая таблица с адаптивным контейнером.
Размер таблицы
Модификаторы меняют размер текста и внутренние отступы ячеек. Обычный класс vg-table соответствует размеру md.
| Название | Статус | Обновлено | ||
|---|---|---|---|---|
| Публичный сайт | Работает | сегодня | on | delete |
| Личный кабинет | Проверка | вчера | on | delete |
| Служба поддержки | Работает | сегодня | on | delete |
| Внутренний портал | Обновление | 2 дня назад | on | delete |
| Архив документов | Работает | неделю назад | on | delete |
Таблица с полосками
Класс выделяет чётные строки фоновым цветом и упрощает чтение длинных списков.
| Название | Статус | Обновлено |
|---|---|---|
| Публичный сайт | Работает | сегодня |
| Личный кабинет | Проверка | вчера |
| Служба поддержки | Работает | сегодня |
| Внутренний портал | Обновление | 2 дня назад |
| Архив документов | Работает | неделю назад |
Подсветка при наведении
Класс подсвечивает строку под указателем и помогает визуально проследить данные по колонкам.
| Название | Статус | Обновлено |
|---|---|---|
| Публичный сайт | Работает | сегодня |
| Личный кабинет | Проверка | вчера |
| Служба поддержки | Работает | сегодня |
| Внутренний портал | Обновление | 2 дня назад |
| Архив документов | Работает | неделю назад |
Адаптивная таблица
Контейнер сохраняет ширину страницы, а таблица с большим количеством колонок прокручивается горизонтально. Зажмите Shift и потяните таблицу мышью.
| ID | Проект | Клиент | Ответственный | Статус | Приоритет | Категория | Создано | Обновлено | Срок |
|---|---|---|---|---|---|---|---|---|---|
| VG-2026-00124 | Корпоративный портал продаж | ООО «Северные технологии» | Александр Воронцов | В работе | Высокий | Разработка интерфейса | 12 августа 2026 | сегодня, 10:45 | 30 сентября 2026 |
| VG-2026-00125 | Личный кабинет партнёра | Vegas Development Group | Екатерина Соколова | Проверка | Средний | Интеграция API | 14 августа 2026 | вчера, 18:20 | 15 октября 2026 |
| VG-2026-00126 | Система управления документами | Региональный сервисный центр | Михаил Громов | Планирование | Обычный | Проектирование | 18 августа 2026 | 2 дня назад | 1 ноября 2026 |
Сложная таблица
Пример неоднородной сетки: заголовки строк, групповой заголовок из двух колонок, объединённая строка и ячейка на две строки.
| Строка | Имя | Возраст | Домашний телефон | Адрес | |
|---|---|---|---|---|---|
| 1 | John Brown | 32 | 0571-22098909 | 18889898989 | New York No. 1 Lake Park |
| 2 | Jim Green | ||||
| 3 | Joe Black | 32 | 0575-22098909 | 18900010002 | Sydney No. 1 Lake Park |
| 4 | Jim Red | 18 | 0575-22098909 | 18900010002 | London No. 2 Lake Park |
| 5 | Jake White | 18 | 18900010002 | Dublin No. 2 Lake Park | |