Tree

The Tree component renders data in a hierarchical structure. This component supports a series of parent nodes and child nodes, where the parent nodes act as directories that can expand or collapse the children beneath it. This functionality is possible thanks to the ExpandCollapse component.

For more information on how to use the features and props for this component, check out the developer documentation.

The Tree component is capable of a large variety of custom rendering strategies that help to ensure that any navigation or file organization use-case is covered. The component has been designed to be flexible for many use-cases and custom implementations. At its core, the Tree component expects a list of nodes, and each node can contain its own child nodes. This allows for an endless hierarchy of data that can be presented at various levels.

For custom styling of your nodes, you may provide a nodeRenderer. The nodeRenderer is a functional component that accepts props for depth, hasParentSibling, and subTree that can be used to manage the styles of each node. The depth prop can be used to add additional inline margin to each level of nested nodes. This prop is managed by the Tree component itself. Additional props can be passed into the nodeRenderer if you have defined a custom interface for your nodes.

The Cosmos design systems offers a streamlined StandardTree component that is built on top of the Tree component and is offered to help elevate some of the complexity of building a custom Tree component. The StandardTree component adds a variety of props that are available to the nodes, such as label, icon, actions, and booleans that help manage the state of the node such as loading and expanded. If a node is loading, a Progress animation will render. This can be useful for waiting on API calls to populate nested nodes.

The label of a standard node is required and will appear as plain Text. If provided an icon name, the appropriate Cosmos Icon will render inline prior to the node's label. For the use of custom icons, refer to the Icon documentation. Any actions that are passed to a node will render inline towards to end of the node. The entire row that the node occupies is a clickable region. The StandardTree offers onClick callback functions for each node, as well as a top-level onNodeClick handler that is applied to all nodes in the Tree.

The StandardTree can be set to include horizontal lines alongside each level of nested nodes for better visual separation. Pass the lined prop to enable these styles.

NameTypeDefaultDescription
nodes*StandardTreeNode[]An array of ParentNodes and Nodes that compose the layout of the Tree.
classNamestringAdditional CSS classes.
currentNodeId
linedboolean
nodeRenderer
ComponentType<{
  depth: number;
  hasParentSibling:;
  subTree: ReactNode;
} & Exclude<StandardTreeNode, 'listItemProps'>>
A function that allows custom styling and behavior for all Nodes.
onNodeClick
(id: , e: MouseEvent<HTMLElement> |KeyboardEvent<HTMLElement>) => void 
refRef<HTMLUListElement>Ref for the wrapping element.