VGTable

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

Раскрывающиеся строки

Многоуровневое дерево строк со сворачиванием и разворачиванием ветвей.

Многоуровневые строки

Связь задаётся через ID строки и ID родителя. Кнопка создаётся автоматически только у строк с потомками: плюс означает скрытую ветвь, минус — раскрытую. Состояние вложенных ветвей сохраняется при сворачивании родителя.

Название Тип Ответственный
Платформа VGApp Проект Platform Team
Frontend Направление Анна Орлова
Design System Пакет UI Team
Токены и темы Модуль Ирина Волкова
Компоненты Модуль Павел Морозов
Приложение Пакет Анна Орлова
Backend Направление Михаил Громов
Public API Сервис API Team
Commerce Проект Commerce Team
Каталог Направление Catalog Team
Товары Модуль Catalog Team
data-expand-id — уникальный ID data-expand-parent-id — ID родителя глубина не ограничена
HTML 
<table
  class="vg-table vg-table-hovered"
  data-vg-table
  data-sort-enabled="false"
  data-expandable-enable="true"
  data-expandable-collapsed="true"
>
  <tbody>
    <tr data-expand-id="platform" data-expand-collapsed="false">...</tr>
    <tr data-expand-id="frontend" data-expand-parent-id="platform">...</tr>
    <tr data-expand-id="design" data-expand-parent-id="frontend">...</tr>
    <tr data-expand-id="tokens" data-expand-parent-id="design">...</tr>
  </tbody>
</table>
JavaScript 
const table = document.querySelector('#expandable-projects');
const instance = VGTable.getInstance(table);

instance.expandRow('frontend', true);
instance.collapseRow('platform', true);
instance.toggleExpanded('platform', null, true);

table.addEventListener('rowtoggle.vg.table', ({detail}) => {
  console.log(detail.id, detail.expanded);
});