VGTable

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

Фиксированный заголовок

Нативный sticky-заголовок при прокрутке контейнера или всей страницы.

Стенд динамического перерасчёта

Проверяет Fixed Header после замены строк, добавления колонок и изменения доступной ширины. Жёсткими оставлены только ID и действия; остальные колонки рассчитываются по текущему содержимому. На узкой области таблица сохраняет intrinsic-минимумы и получает горизонтальную прокрутку.

ID Проект и направление Ответственный Дата обновления Текущий статус Действия
101СайтАнна01.09.2026Готово
102Личный кабинетКоманда 231.08.2026Проверка
103APIИлья30.08.2026В работе

Прокрутка внутри таблицы

VGTable автоматически создаёт container, header и body по схеме Ant Table. Настоящий thead переносится в header-table, а ширины колонок и горизонтальная прокрутка синхронизируются с body-table.

№ Проект Ответственный Статус
1 Внутренняя задача 01 Команда 1 Активен
2 Внутренняя задача 02 Команда 2 На проверке
3 Внутренняя задача 03 Команда 3 Запланирован
4 Внутренняя задача 04 Команда 4 Завершён
5 Внутренняя задача 05 Команда 5 Активен
6 Внутренняя задача 06 Команда 6 На проверке
7 Внутренняя задача 07 Команда 1 Запланирован
8 Внутренняя задача 08 Команда 2 Завершён
9 Внутренняя задача 09 Команда 3 Активен
10 Внутренняя задача 10 Команда 4 На проверке
11 Внутренняя задача 11 Команда 5 Запланирован
12 Внутренняя задача 12 Команда 6 Завершён
13 Внутренняя задача 13 Команда 1 Активен
14 Внутренняя задача 14 Команда 2 На проверке
15 Внутренняя задача 15 Команда 3 Запланирован
16 Внутренняя задача 16 Команда 4 Завершён
17 Внутренняя задача 17 Команда 5 Активен
18 Внутренняя задача 18 Команда 6 На проверке
19 Внутренняя задача 19 Команда 1 Запланирован
20 Внутренняя задача 20 Команда 2 Завершён
21 Внутренняя задача 21 Команда 3 Активен
22 Внутренняя задача 22 Команда 4 На проверке
23 Внутренняя задача 23 Команда 5 Запланирован
24 Внутренняя задача 24 Команда 6 Завершён
25 Внутренняя задача 25 Команда 1 Активен
26 Внутренняя задача 26 Команда 2 На проверке
27 Внутренняя задача 27 Команда 3 Запланирован
28 Внутренняя задача 28 Команда 4 Завершён
29 Внутренняя задача 29 Команда 5 Активен
30 Внутренняя задача 30 Команда 6 На проверке
31 Внутренняя задача 31 Команда 1 Запланирован
32 Внутренняя задача 32 Команда 2 Завершён
33 Внутренняя задача 33 Команда 3 Активен
34 Внутренняя задача 34 Команда 4 На проверке
35 Внутренняя задача 35 Команда 5 Запланирован
36 Внутренняя задача 36 Команда 6 Завершён
HTML 
<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-sticky-header-enable="true"
  data-sticky-header-mode="container"
  data-sticky-header-max-height="24rem"
>
  ...
</table>

Фиксированный заголовок с пагинацией

В таблице находится 100 строк, по 10 строк на страницу. Header и body остаются внутри container, а панель пагинации создаётся рядом с ним внутри общего wrapper.

№ Задача Команда Статус
1 Задача с пагинацией 001 Команда 1 Активен
2 Задача с пагинацией 002 Команда 2 На проверке
3 Задача с пагинацией 003 Команда 3 Запланирован
4 Задача с пагинацией 004 Команда 4 Завершён
5 Задача с пагинацией 005 Команда 5 Активен
6 Задача с пагинацией 006 Команда 6 На проверке
7 Задача с пагинацией 007 Команда 1 Запланирован
8 Задача с пагинацией 008 Команда 2 Завершён
9 Задача с пагинацией 009 Команда 3 Активен
10 Задача с пагинацией 010 Команда 4 На проверке
11 Задача с пагинацией 011 Команда 5 Запланирован
12 Задача с пагинацией 012 Команда 6 Завершён
13 Задача с пагинацией 013 Команда 1 Активен
14 Задача с пагинацией 014 Команда 2 На проверке
15 Задача с пагинацией 015 Команда 3 Запланирован
16 Задача с пагинацией 016 Команда 4 Завершён
17 Задача с пагинацией 017 Команда 5 Активен
18 Задача с пагинацией 018 Команда 6 На проверке
19 Задача с пагинацией 019 Команда 1 Запланирован
20 Задача с пагинацией 020 Команда 2 Завершён
21 Задача с пагинацией 021 Команда 3 Активен
22 Задача с пагинацией 022 Команда 4 На проверке
23 Задача с пагинацией 023 Команда 5 Запланирован
24 Задача с пагинацией 024 Команда 6 Завершён
25 Задача с пагинацией 025 Команда 1 Активен
26 Задача с пагинацией 026 Команда 2 На проверке
27 Задача с пагинацией 027 Команда 3 Запланирован
28 Задача с пагинацией 028 Команда 4 Завершён
29 Задача с пагинацией 029 Команда 5 Активен
30 Задача с пагинацией 030 Команда 6 На проверке
31 Задача с пагинацией 031 Команда 1 Запланирован
32 Задача с пагинацией 032 Команда 2 Завершён
33 Задача с пагинацией 033 Команда 3 Активен
34 Задача с пагинацией 034 Команда 4 На проверке
35 Задача с пагинацией 035 Команда 5 Запланирован
36 Задача с пагинацией 036 Команда 6 Завершён
37 Задача с пагинацией 037 Команда 1 Активен
38 Задача с пагинацией 038 Команда 2 На проверке
39 Задача с пагинацией 039 Команда 3 Запланирован
40 Задача с пагинацией 040 Команда 4 Завершён
41 Задача с пагинацией 041 Команда 5 Активен
42 Задача с пагинацией 042 Команда 6 На проверке
43 Задача с пагинацией 043 Команда 1 Запланирован
44 Задача с пагинацией 044 Команда 2 Завершён
45 Задача с пагинацией 045 Команда 3 Активен
46 Задача с пагинацией 046 Команда 4 На проверке
47 Задача с пагинацией 047 Команда 5 Запланирован
48 Задача с пагинацией 048 Команда 6 Завершён
49 Задача с пагинацией 049 Команда 1 Активен
50 Задача с пагинацией 050 Команда 2 На проверке
51 Задача с пагинацией 051 Команда 3 Запланирован
52 Задача с пагинацией 052 Команда 4 Завершён
53 Задача с пагинацией 053 Команда 5 Активен
54 Задача с пагинацией 054 Команда 6 На проверке
55 Задача с пагинацией 055 Команда 1 Запланирован
56 Задача с пагинацией 056 Команда 2 Завершён
57 Задача с пагинацией 057 Команда 3 Активен
58 Задача с пагинацией 058 Команда 4 На проверке
59 Задача с пагинацией 059 Команда 5 Запланирован
60 Задача с пагинацией 060 Команда 6 Завершён
61 Задача с пагинацией 061 Команда 1 Активен
62 Задача с пагинацией 062 Команда 2 На проверке
63 Задача с пагинацией 063 Команда 3 Запланирован
64 Задача с пагинацией 064 Команда 4 Завершён
65 Задача с пагинацией 065 Команда 5 Активен
66 Задача с пагинацией 066 Команда 6 На проверке
67 Задача с пагинацией 067 Команда 1 Запланирован
68 Задача с пагинацией 068 Команда 2 Завершён
69 Задача с пагинацией 069 Команда 3 Активен
70 Задача с пагинацией 070 Команда 4 На проверке
71 Задача с пагинацией 071 Команда 5 Запланирован
72 Задача с пагинацией 072 Команда 6 Завершён
73 Задача с пагинацией 073 Команда 1 Активен
74 Задача с пагинацией 074 Команда 2 На проверке
75 Задача с пагинацией 075 Команда 3 Запланирован
76 Задача с пагинацией 076 Команда 4 Завершён
77 Задача с пагинацией 077 Команда 5 Активен
78 Задача с пагинацией 078 Команда 6 На проверке
79 Задача с пагинацией 079 Команда 1 Запланирован
80 Задача с пагинацией 080 Команда 2 Завершён
81 Задача с пагинацией 081 Команда 3 Активен
82 Задача с пагинацией 082 Команда 4 На проверке
83 Задача с пагинацией 083 Команда 5 Запланирован
84 Задача с пагинацией 084 Команда 6 Завершён
85 Задача с пагинацией 085 Команда 1 Активен
86 Задача с пагинацией 086 Команда 2 На проверке
87 Задача с пагинацией 087 Команда 3 Запланирован
88 Задача с пагинацией 088 Команда 4 Завершён
89 Задача с пагинацией 089 Команда 5 Активен
90 Задача с пагинацией 090 Команда 6 На проверке
91 Задача с пагинацией 091 Команда 1 Запланирован
92 Задача с пагинацией 092 Команда 2 Завершён
93 Задача с пагинацией 093 Команда 3 Активен
94 Задача с пагинацией 094 Команда 4 На проверке
95 Задача с пагинацией 095 Команда 5 Запланирован
96 Задача с пагинацией 096 Команда 6 Завершён
97 Задача с пагинацией 097 Команда 1 Активен
98 Задача с пагинацией 098 Команда 2 На проверке
99 Задача с пагинацией 099 Команда 3 Запланирован
100 Задача с пагинацией 100 Команда 4 Завершён
HTML 
<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-sticky-header-enable="true"
  data-sticky-header-mode="container"
  data-sticky-header-max-height="24rem"
  data-pagination-enable="true"
  data-pagination-per-page="10"
>
  ...
</table>

Прокрутка страницы

У длинной таблицы body не получает собственную вертикальную прокрутку. Header-слой фиксируется ниже основного header сайта через публичную переменную --vg-table-sticky-top и отпускается вместе с container.

№ Запись Категория Статус
1 Запись длинной таблицы 001 Раздел 1 Активен
2 Запись длинной таблицы 002 Раздел 2 На проверке
3 Запись длинной таблицы 003 Раздел 3 Запланирован
4 Запись длинной таблицы 004 Раздел 4 Завершён
5 Запись длинной таблицы 005 Раздел 5 Активен
6 Запись длинной таблицы 006 Раздел 6 На проверке
7 Запись длинной таблицы 007 Раздел 7 Запланирован
8 Запись длинной таблицы 008 Раздел 8 Завершён
9 Запись длинной таблицы 009 Раздел 1 Активен
10 Запись длинной таблицы 010 Раздел 2 На проверке
11 Запись длинной таблицы 011 Раздел 3 Запланирован
12 Запись длинной таблицы 012 Раздел 4 Завершён
13 Запись длинной таблицы 013 Раздел 5 Активен
14 Запись длинной таблицы 014 Раздел 6 На проверке
15 Запись длинной таблицы 015 Раздел 7 Запланирован
16 Запись длинной таблицы 016 Раздел 8 Завершён
17 Запись длинной таблицы 017 Раздел 1 Активен
18 Запись длинной таблицы 018 Раздел 2 На проверке
19 Запись длинной таблицы 019 Раздел 3 Запланирован
20 Запись длинной таблицы 020 Раздел 4 Завершён
21 Запись длинной таблицы 021 Раздел 5 Активен
22 Запись длинной таблицы 022 Раздел 6 На проверке
23 Запись длинной таблицы 023 Раздел 7 Запланирован
24 Запись длинной таблицы 024 Раздел 8 Завершён
25 Запись длинной таблицы 025 Раздел 1 Активен
26 Запись длинной таблицы 026 Раздел 2 На проверке
27 Запись длинной таблицы 027 Раздел 3 Запланирован
28 Запись длинной таблицы 028 Раздел 4 Завершён
29 Запись длинной таблицы 029 Раздел 5 Активен
30 Запись длинной таблицы 030 Раздел 6 На проверке
31 Запись длинной таблицы 031 Раздел 7 Запланирован
32 Запись длинной таблицы 032 Раздел 8 Завершён
33 Запись длинной таблицы 033 Раздел 1 Активен
34 Запись длинной таблицы 034 Раздел 2 На проверке
35 Запись длинной таблицы 035 Раздел 3 Запланирован
36 Запись длинной таблицы 036 Раздел 4 Завершён
37 Запись длинной таблицы 037 Раздел 5 Активен
38 Запись длинной таблицы 038 Раздел 6 На проверке
39 Запись длинной таблицы 039 Раздел 7 Запланирован
40 Запись длинной таблицы 040 Раздел 8 Завершён
41 Запись длинной таблицы 041 Раздел 1 Активен
42 Запись длинной таблицы 042 Раздел 2 На проверке
43 Запись длинной таблицы 043 Раздел 3 Запланирован
44 Запись длинной таблицы 044 Раздел 4 Завершён
45 Запись длинной таблицы 045 Раздел 5 Активен
46 Запись длинной таблицы 046 Раздел 6 На проверке
47 Запись длинной таблицы 047 Раздел 7 Запланирован
48 Запись длинной таблицы 048 Раздел 8 Завершён
49 Запись длинной таблицы 049 Раздел 1 Активен
50 Запись длинной таблицы 050 Раздел 2 На проверке
51 Запись длинной таблицы 051 Раздел 3 Запланирован
52 Запись длинной таблицы 052 Раздел 4 Завершён
53 Запись длинной таблицы 053 Раздел 5 Активен
54 Запись длинной таблицы 054 Раздел 6 На проверке
55 Запись длинной таблицы 055 Раздел 7 Запланирован
56 Запись длинной таблицы 056 Раздел 8 Завершён
57 Запись длинной таблицы 057 Раздел 1 Активен
58 Запись длинной таблицы 058 Раздел 2 На проверке
59 Запись длинной таблицы 059 Раздел 3 Запланирован
60 Запись длинной таблицы 060 Раздел 4 Завершён
61 Запись длинной таблицы 061 Раздел 5 Активен
62 Запись длинной таблицы 062 Раздел 6 На проверке
63 Запись длинной таблицы 063 Раздел 7 Запланирован
64 Запись длинной таблицы 064 Раздел 8 Завершён
65 Запись длинной таблицы 065 Раздел 1 Активен
66 Запись длинной таблицы 066 Раздел 2 На проверке
67 Запись длинной таблицы 067 Раздел 3 Запланирован
68 Запись длинной таблицы 068 Раздел 4 Завершён
69 Запись длинной таблицы 069 Раздел 5 Активен
70 Запись длинной таблицы 070 Раздел 6 На проверке
71 Запись длинной таблицы 071 Раздел 7 Запланирован
72 Запись длинной таблицы 072 Раздел 8 Завершён
73 Запись длинной таблицы 073 Раздел 1 Активен
74 Запись длинной таблицы 074 Раздел 2 На проверке
75 Запись длинной таблицы 075 Раздел 3 Запланирован
76 Запись длинной таблицы 076 Раздел 4 Завершён
77 Запись длинной таблицы 077 Раздел 5 Активен
78 Запись длинной таблицы 078 Раздел 6 На проверке
79 Запись длинной таблицы 079 Раздел 7 Запланирован
80 Запись длинной таблицы 080 Раздел 8 Завершён
81 Запись длинной таблицы 081 Раздел 1 Активен
82 Запись длинной таблицы 082 Раздел 2 На проверке
83 Запись длинной таблицы 083 Раздел 3 Запланирован
84 Запись длинной таблицы 084 Раздел 4 Завершён
85 Запись длинной таблицы 085 Раздел 5 Активен
86 Запись длинной таблицы 086 Раздел 6 На проверке
87 Запись длинной таблицы 087 Раздел 7 Запланирован
88 Запись длинной таблицы 088 Раздел 8 Завершён
89 Запись длинной таблицы 089 Раздел 1 Активен
90 Запись длинной таблицы 090 Раздел 2 На проверке
91 Запись длинной таблицы 091 Раздел 3 Запланирован
92 Запись длинной таблицы 092 Раздел 4 Завершён
93 Запись длинной таблицы 093 Раздел 5 Активен
94 Запись длинной таблицы 094 Раздел 6 На проверке
95 Запись длинной таблицы 095 Раздел 7 Запланирован
96 Запись длинной таблицы 096 Раздел 8 Завершён
97 Запись длинной таблицы 097 Раздел 1 Активен
98 Запись длинной таблицы 098 Раздел 2 На проверке
99 Запись длинной таблицы 099 Раздел 3 Запланирован
100 Запись длинной таблицы 100 Раздел 4 Завершён
HTML 
<div
  class="vg-table-wrapper"
  style="--vg-table-sticky-top: var(--vg-header-height, 0px)"
>
  <table
    class="vg-table vg-table-striped"
    data-vg-table
    data-sticky-header-enable="true"
    data-sticky-header-mode="page"
  >
    ...
  </table>
</div>