hoffstadt / hoffstadt/DearPyGui

Tree View with Table in DearPyGui

Open
#2,379 4 comments 0 reactions 0 assignees View on GitHub
state: pending type: improvement
Dominant language
C++
Stars
15.6k
Forks
783
PR merge metrics
No merged PRs in 30d

Description

I would like to request the addition of a feature in DearPyGui that allows the creation of a tree view inside a table. This feature is inspired by ImGui's capability to create such a layout. Below is a reference implementation using ImGui:

cpp

复制
if (ImGui::TreeNode("Tree view"))
{
static ImGuiTableFlags flags = ImGuiTableFlags_BordersV | ImGuiTableFlags_BordersOuterH | ImGuiTableFlags_Resizable | ImGuiTableFlags_RowBg | ImGuiTableFlags_NoBordersInBody;

if (ImGui::BeginTable("3ways", 3, flags))
{
ImGui::TableSetupColumn("Name", ImGuiTableColumnFlags_NoHide);
ImGui::TableSetupColumn("Size", ImGuiTableColumnFlags_WidthFixed, TEXT_BASE_WIDTH * 12.0f);
ImGui::TableSetupColumn("Type", ImGuiTableColumnFlags_WidthFixed, TEXT_BASE_WIDTH * 18.0f);
ImGui::TableHeadersRow();

struct MyTreeNode
{
const char* Name;
const char* Type;
int Size;
int ChildIdx;
int ChildCount;
static void DisplayNode(const MyTreeNode* node, const MyTreeNode* all_nodes)
{
ImGui::TableNextRow();
ImGui::TableNextColumn();
const bool is_folder = (node->ChildCount > 0);
if (is_folder)
{
bool open = ImGui::TreeNodeEx(node->Name, ImGuiTreeNodeFlags_SpanFullWidth);
ImGui::TableNextColumn();
ImGui::TextDisabled("--");
ImGui::TableNextColumn();
ImGui::TextUnformatted(node->Type);
if (open)
{
for (int child_n = 0; child_n < node->ChildCount; child_n++)
DisplayNode(&all_nodes[node->ChildIdx + child_n], all_nodes);
ImGui::TreePop();
}
}
else
{
ImGui::TreeNodeEx(node->Name, ImGuiTreeNodeFlags_Leaf | ImGuiTreeNodeFlags_Bullet | ImGuiTreeNodeFlags_NoTreePushOnOpen | ImGuiTreeNodeFlags_SpanFullWidth);
ImGui::TableNextColumn();
ImGui::Text("%d", node->Size);
ImGui::TableNextColumn();
ImGui::TextUnformatted(node->Type);
}
}
};
static const MyTreeNode nodes[] =
{
{ "Root", "Folder", -1, 1, 3 }, // 0
{ "Music", "Folder", -1, 4, 2 }, // 1
{ "Textures", "Folder", -1, 6, 3 }, // 2
{ "desktop.ini", "System file", 1024, -1,-1 }, // 3
{ "File1_a.wav", "Audio file", 123000, -1,-1 }, // 4
{ "File1_b.wav", "Audio file", 456000, -1,-1 }, // 5
{ "Image001.png", "Image file", 203128, -1,-1 }, // 6
{ "Copy of Image001.png", "Image file", 203256, -1,-1 }, // 7
{ "Copy of Image001 (Final2).png","Image file", 203512, -1,-1 }, // 8
};

MyTreeNode::DisplayNode(&nodes[0], nodes);

ImGui::EndTable();
}
ImGui::TreePop();
}
Benefits
Enhanced UI Capability: This feature would allow users to create more complex and organized interfaces, especially useful for applications dealing with hierarchical data.
Consistency with ImGui: Users familiar with ImGui's functionality would have an easier transition and more powerful tools at their disposal.
Implementation Notes
The feature should support various table flags such as resizable columns, row backgrounds, and customizable column widths.
It should allow the nesting of tree nodes within table cells, maintaining the hierarchical structure.
Thank you for considering this feature request. Implementing this would greatly enhance the versatility and usability of DearPyGui for many developers.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.