Tree Like Representation

Design
#1

I’m trying to understand how to represent a tree-like structure in PatternFly. I’m thinking in having a sort of an explorer tree on the left.

I’m not sure if this is the best practice or even the way I should go about it.

Now the only component I’ve seen that would be somewhat able to model that would be the expandable component, combined probably with a breadcrumb component.

Looking at the navigation system I can’t imagine how it would look like. It seems that only 1-2 levels deep are possible, and even then with a full context switch. I.e A select to pick the “project” in the navigation bar, or another select in the left navigation bar, etc.

Unfortunately, they don’t scale well for infinitely recursive structures like folders.

So, what would be the best practice to model a tree structure?

#2

Unfortunately we do not have a Tree component available today in PatternFly 4, but it is something that we plan to add. There is an open issue here where you can track some of the discussion: https://github.com/patternfly/patternfly-next/issues/2455 Let us know what your requirements are and I can make sure that they get factored in.

#3

Hi Matt @mcarrano , we are considering using this tree pattern you linked in our Keycloak console design. Just wondering whether this pattern has been done yet? Are there any other functions or actions could be put in this pattern such as “cut one sub-item and paste it into another group” ?

#4

This component is still in progress. We are looking at possible approaches contributed from product. @lhinson may be able to provide more infornation. cc @Amy_Glass