Древовидное меню
Древовидное меню содержит дополнительную навигацию, которая позволяет представить группировку элементов таблицы в виде дерева.
Древовидная таблица или древовидное меню. Что использовать?
| Критерий / Компонент | Древовидная таблица | Древовидное меню |
|---|---|---|
| Нужно видеть одновременно всю иерархию, чтобы с ней работать, анализировать, сравнивать (например, потомков сразу нескольких соседних записей) | 🟢 | 🔴 |
| Нужна связь “родительская запись - дочерняя запись | 🟢 | 🔴 |
| Нужно создать удобную навигацию, разбить записи по группам, уметь фильтроваться по ним | 🔴 | 🟢 |
| Атрибутный состав дочерних записей различается | 🔴 | 🟢 |
Древовидное меню в интерфейсе
- Боковая панель с деревом расположена внутри карточки рядом с таблицей. Это позволяет увеличивать/уменьшать ширину боковой панели, потянув за разделитель между панелью и таблицей.
По умолчанию ширина панели составляет 320 px.
- Боковая панель умеет сворачиваться. Также она содержит строку поиска по группе и кнопку добавления новой группы, при клике на которую поднимется сайдбар добавления группы.
- При наведении на строку с группой появляется иконка контекстного меню, при клике на которую выпадает список меню.
- При клике на группу в дереве меню в таблице остаются только те записи, которые содержатся в этой группе. Вместе с этим в таблице заполняется фильтр по группе. Это фильтр - лукап. При свернутом боковом меню остается возможность осуществлять навигацию через этот фильтр. Также, сбросив этот фильтр, пункт в древовидном меню сбросится.
