VGTable

Динамические таблицы

Фиксированные колонки

Обычные и накапливаемые sticky-колонки при горизонтальной прокрутке таблицы.

Фиксированные колонки

Фиксируется только последняя колонка Действия. В таблице 100 строк, включены кнопки пагинации и VGDropdown выбора количества строк на странице.

№ Сотрудник Отдел Должность Почта Город Обновлено Действия
1Сотрудник 1Отдел 1 Специалистuser1@example.ruМосква 23.09.2026Открыть
2Сотрудник 2Отдел 2 Специалистuser2@example.ruКазань 22.09.2026Открыть
3Сотрудник 3Отдел 3 Специалистuser3@example.ruМосква 21.09.2026Открыть
4Сотрудник 4Отдел 4 Специалистuser4@example.ruКазань 20.09.2026Открыть
5Сотрудник 5Отдел 1 Специалистuser5@example.ruМосква 19.09.2026Открыть
6Сотрудник 6Отдел 2 Специалистuser6@example.ruКазань 18.09.2026Открыть
7Сотрудник 7Отдел 3 Специалистuser7@example.ruМосква 17.09.2026Открыть
8Сотрудник 8Отдел 4 Специалистuser8@example.ruКазань 16.09.2026Открыть
9Сотрудник 9Отдел 1 Специалистuser9@example.ruМосква 15.09.2026Открыть
10Сотрудник 10Отдел 2 Специалистuser10@example.ruКазань 14.09.2026Открыть
11Сотрудник 11Отдел 3 Специалистuser11@example.ruМосква 13.09.2026Открыть
12Сотрудник 12Отдел 4 Специалистuser12@example.ruКазань 12.09.2026Открыть
13Сотрудник 13Отдел 1 Специалистuser13@example.ruМосква 11.09.2026Открыть
14Сотрудник 14Отдел 2 Специалистuser14@example.ruКазань 10.09.2026Открыть
15Сотрудник 15Отдел 3 Специалистuser15@example.ruМосква 09.09.2026Открыть
16Сотрудник 16Отдел 4 Специалистuser16@example.ruКазань 08.09.2026Открыть
17Сотрудник 17Отдел 1 Специалистuser17@example.ruМосква 07.09.2026Открыть
18Сотрудник 18Отдел 2 Специалистuser18@example.ruКазань 06.09.2026Открыть
19Сотрудник 19Отдел 3 Специалистuser19@example.ruМосква 05.09.2026Открыть
20Сотрудник 20Отдел 4 Специалистuser20@example.ruКазань 04.09.2026Открыть
21Сотрудник 21Отдел 1 Специалистuser21@example.ruМосква 03.09.2026Открыть
22Сотрудник 22Отдел 2 Специалистuser22@example.ruКазань 02.09.2026Открыть
23Сотрудник 23Отдел 3 Специалистuser23@example.ruМосква 01.09.2026Открыть
24Сотрудник 24Отдел 4 Специалистuser24@example.ruКазань 31.08.2026Открыть
25Сотрудник 25Отдел 1 Специалистuser25@example.ruМосква 30.08.2026Открыть
26Сотрудник 26Отдел 2 Специалистuser26@example.ruКазань 29.08.2026Открыть
27Сотрудник 27Отдел 3 Специалистuser27@example.ruМосква 28.08.2026Открыть
28Сотрудник 28Отдел 4 Специалистuser28@example.ruКазань 27.08.2026Открыть
29Сотрудник 29Отдел 1 Специалистuser29@example.ruМосква 26.08.2026Открыть
30Сотрудник 30Отдел 2 Специалистuser30@example.ruКазань 25.08.2026Открыть
31Сотрудник 31Отдел 3 Специалистuser31@example.ruМосква 24.08.2026Открыть
32Сотрудник 32Отдел 4 Специалистuser32@example.ruКазань 23.08.2026Открыть
33Сотрудник 33Отдел 1 Специалистuser33@example.ruМосква 22.08.2026Открыть
34Сотрудник 34Отдел 2 Специалистuser34@example.ruКазань 21.08.2026Открыть
35Сотрудник 35Отдел 3 Специалистuser35@example.ruМосква 20.08.2026Открыть
36Сотрудник 36Отдел 4 Специалистuser36@example.ruКазань 19.08.2026Открыть
37Сотрудник 37Отдел 1 Специалистuser37@example.ruМосква 18.08.2026Открыть
38Сотрудник 38Отдел 2 Специалистuser38@example.ruКазань 17.08.2026Открыть
39Сотрудник 39Отдел 3 Специалистuser39@example.ruМосква 16.08.2026Открыть
40Сотрудник 40Отдел 4 Специалистuser40@example.ruКазань 15.08.2026Открыть
41Сотрудник 41Отдел 1 Специалистuser41@example.ruМосква 14.08.2026Открыть
42Сотрудник 42Отдел 2 Специалистuser42@example.ruКазань 13.08.2026Открыть
43Сотрудник 43Отдел 3 Специалистuser43@example.ruМосква 12.08.2026Открыть
44Сотрудник 44Отдел 4 Специалистuser44@example.ruКазань 11.08.2026Открыть
45Сотрудник 45Отдел 1 Специалистuser45@example.ruМосква 10.08.2026Открыть
46Сотрудник 46Отдел 2 Специалистuser46@example.ruКазань 09.08.2026Открыть
47Сотрудник 47Отдел 3 Специалистuser47@example.ruМосква 08.08.2026Открыть
48Сотрудник 48Отдел 4 Специалистuser48@example.ruКазань 07.08.2026Открыть
49Сотрудник 49Отдел 1 Специалистuser49@example.ruМосква 06.08.2026Открыть
50Сотрудник 50Отдел 2 Специалистuser50@example.ruКазань 05.08.2026Открыть
51Сотрудник 51Отдел 3 Специалистuser51@example.ruМосква 04.08.2026Открыть
52Сотрудник 52Отдел 4 Специалистuser52@example.ruКазань 03.08.2026Открыть
53Сотрудник 53Отдел 1 Специалистuser53@example.ruМосква 02.08.2026Открыть
54Сотрудник 54Отдел 2 Специалистuser54@example.ruКазань 01.08.2026Открыть
55Сотрудник 55Отдел 3 Специалистuser55@example.ruМосква 31.07.2026Открыть
56Сотрудник 56Отдел 4 Специалистuser56@example.ruКазань 30.07.2026Открыть
57Сотрудник 57Отдел 1 Специалистuser57@example.ruМосква 29.07.2026Открыть
58Сотрудник 58Отдел 2 Специалистuser58@example.ruКазань 28.07.2026Открыть
59Сотрудник 59Отдел 3 Специалистuser59@example.ruМосква 27.07.2026Открыть
60Сотрудник 60Отдел 4 Специалистuser60@example.ruКазань 26.07.2026Открыть
61Сотрудник 61Отдел 1 Специалистuser61@example.ruМосква 25.07.2026Открыть
62Сотрудник 62Отдел 2 Специалистuser62@example.ruКазань 24.07.2026Открыть
63Сотрудник 63Отдел 3 Специалистuser63@example.ruМосква 23.07.2026Открыть
64Сотрудник 64Отдел 4 Специалистuser64@example.ruКазань 22.07.2026Открыть
65Сотрудник 65Отдел 1 Специалистuser65@example.ruМосква 21.07.2026Открыть
66Сотрудник 66Отдел 2 Специалистuser66@example.ruКазань 20.07.2026Открыть
67Сотрудник 67Отдел 3 Специалистuser67@example.ruМосква 19.07.2026Открыть
68Сотрудник 68Отдел 4 Специалистuser68@example.ruКазань 18.07.2026Открыть
69Сотрудник 69Отдел 1 Специалистuser69@example.ruМосква 17.07.2026Открыть
70Сотрудник 70Отдел 2 Специалистuser70@example.ruКазань 16.07.2026Открыть
71Сотрудник 71Отдел 3 Специалистuser71@example.ruМосква 15.07.2026Открыть
72Сотрудник 72Отдел 4 Специалистuser72@example.ruКазань 14.07.2026Открыть
73Сотрудник 73Отдел 1 Специалистuser73@example.ruМосква 13.07.2026Открыть
74Сотрудник 74Отдел 2 Специалистuser74@example.ruКазань 12.07.2026Открыть
75Сотрудник 75Отдел 3 Специалистuser75@example.ruМосква 11.07.2026Открыть
76Сотрудник 76Отдел 4 Специалистuser76@example.ruКазань 10.07.2026Открыть
77Сотрудник 77Отдел 1 Специалистuser77@example.ruМосква 09.07.2026Открыть
78Сотрудник 78Отдел 2 Специалистuser78@example.ruКазань 08.07.2026Открыть
79Сотрудник 79Отдел 3 Специалистuser79@example.ruМосква 07.07.2026Открыть
80Сотрудник 80Отдел 4 Специалистuser80@example.ruКазань 06.07.2026Открыть
81Сотрудник 81Отдел 1 Специалистuser81@example.ruМосква 05.07.2026Открыть
82Сотрудник 82Отдел 2 Специалистuser82@example.ruКазань 04.07.2026Открыть
83Сотрудник 83Отдел 3 Специалистuser83@example.ruМосква 03.07.2026Открыть
84Сотрудник 84Отдел 4 Специалистuser84@example.ruКазань 02.07.2026Открыть
85Сотрудник 85Отдел 1 Специалистuser85@example.ruМосква 01.07.2026Открыть
86Сотрудник 86Отдел 2 Специалистuser86@example.ruКазань 30.06.2026Открыть
87Сотрудник 87Отдел 3 Специалистuser87@example.ruМосква 29.06.2026Открыть
88Сотрудник 88Отдел 4 Специалистuser88@example.ruКазань 28.06.2026Открыть
89Сотрудник 89Отдел 1 Специалистuser89@example.ruМосква 27.06.2026Открыть
90Сотрудник 90Отдел 2 Специалистuser90@example.ruКазань 26.06.2026Открыть
91Сотрудник 91Отдел 3 Специалистuser91@example.ruМосква 25.06.2026Открыть
92Сотрудник 92Отдел 4 Специалистuser92@example.ruКазань 24.06.2026Открыть
93Сотрудник 93Отдел 1 Специалистuser93@example.ruМосква 23.06.2026Открыть
94Сотрудник 94Отдел 2 Специалистuser94@example.ruКазань 22.06.2026Открыть
95Сотрудник 95Отдел 3 Специалистuser95@example.ruМосква 21.06.2026Открыть
96Сотрудник 96Отдел 4 Специалистuser96@example.ruКазань 20.06.2026Открыть
97Сотрудник 97Отдел 1 Специалистuser97@example.ruМосква 19.06.2026Открыть
98Сотрудник 98Отдел 2 Специалистuser98@example.ruКазань 18.06.2026Открыть
99Сотрудник 99Отдел 3 Специалистuser99@example.ruМосква 17.06.2026Открыть
100Сотрудник 100Отдел 4 Специалистuser100@example.ruКазань 16.06.2026Открыть
HTML 
<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-fixed-columns="right:actions"
  data-pagination-enable="true"
  data-pagination-per-page="10"
  data-pagination-show-per-page="true"
  style="min-width: 90rem"
>
  <thead>
    <tr>
      <th data-field="id">№</th>
      <th data-field="name">Сотрудник</th>
      ...
      <th data-field="actions">Действия</th>
    </tr>
  </thead>
  ...
</table>

Стек фиксированных колонок

Колонки можно объявлять с промежутками. При прокрутке Отдел присоединяется к № слева, а правые действия последовательно освобождают край — это stack-режим без transform и задержки теней.

№Сотрудник ОтделПроект ЭтапПриоритет СтатусСрок КарточкаКомментарий Ещё
1Участник 1Команда 1 Проект 1Этап 1Высокий Активен25.09.2026 ОткрытьРабочая запись 1Меню
2Участник 2Команда 2 Проект 2Этап 2Обычный На проверке26.09.2026 ОткрытьРабочая запись 2Меню
3Участник 3Команда 3 Проект 3Этап 3Высокий Запланирован27.09.2026 ОткрытьРабочая запись 3Меню
4Участник 4Команда 1 Проект 4Этап 4Обычный Завершён28.09.2026 ОткрытьРабочая запись 4Меню
5Участник 5Команда 2 Проект 5Этап 5Высокий Активен29.09.2026 ОткрытьРабочая запись 5Меню
6Участник 6Команда 3 Проект 6Этап 1Обычный На проверке30.09.2026 ОткрытьРабочая запись 6Меню
7Участник 7Команда 1 Проект 7Этап 2Высокий Запланирован01.10.2026 ОткрытьРабочая запись 7Меню
8Участник 8Команда 2 Проект 8Этап 3Обычный Завершён02.10.2026 ОткрытьРабочая запись 8Меню
HTML 
<table
  class="vg-table vg-table-striped vg-table-hovered"
  data-vg-table
  data-fixed-columns="left:id,department;right:action_primary,action_more"
  data-fixed-columns-mode="stack"
  style="min-width: 112rem"
>
  ...
</table>

Фиксированные колонки, заголовок и Remote режим

Последняя колонка фиксируется справа, настоящий thead остаётся в header-слое, а строки и состояние пагинации загружаются с сервера. Доступны кнопки страниц и выбор количества строк.

ID Название Категория Статус Обновлено
HTML 
<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-fixed-columns="right:updated"
  data-sticky-header-enable="true"
  data-sticky-header-mode="container"
  data-sticky-header-max-height="24rem"
  data-request-route="/api/table/remote"
  data-request-responsemode="data"
  data-pagination-enable="true"
  data-pagination-per-page="10"
  data-pagination-show-per-page="true"
  style="min-width: 76rem"
>
  ...
</table>