Tree view

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.

Examples

Default

With search

With icons

With badges

With custom badges

With action items

Guides

Compact

Compact, no background

Props

TreeView

*required
Name	Type	Default	Description
datarequired	TreeViewDataItem[]		Data of the tree view
activeItems	TreeViewDataItem[]		Active items of tree view
allExpanded	boolean		Sets the expanded state on all tree nodes, overriding default behavior and current internal state
className	string		Class to add to add if not passed a parentItem
compareItems	(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean	(item, itemToCheck) => item.id === itemToCheck.id	Comparison function for determining active items
defaultAllExpanded	boolean	false	Sets the default expanded behavior
expandedIcon	React.ReactNode		Icon for all expanded node items
hasBadges	boolean	false	Flag indicating if all nodes in the tree view should have badges
hasChecks	boolean	false	Flag indicating if all nodes in the tree view should have checkboxes
hasGuides	boolean	false	Flag indicating if tree view has guide lines.
icon	React.ReactNode		Icon for all leaf or unexpanded node items
id	string		ID of the tree view
isNested	boolean	false	Flag indicating if the tree view is nested
onCheck	(event: React.ChangeEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void		Callback for item checkbox selection
onSelect	(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void		Callback for item selection
parentItem	TreeViewDataItem		Internal. Parent item of a TreeViewListItem
toolbar	React.ReactNode		Toolbar to display above the tree view
variant	'default' \| 'compact' \| 'compactNoBackground'	'default'	Variant presentation styles for the tree view.

TreeViewDataItem

*required
Name	Type	Description
namerequired	React.ReactNode	Internal content of a tree view item
action	React.ReactNode	Action of a tree view item, can be a Button or Dropdown
badgeProps	any	Additional properties of the tree view item badge
checkProps	TreeViewCheckProps	Additional properties of the tree view item checkbox
children	TreeViewDataItem[]	Child nodes of a tree view item
customBadgeContent	React.ReactNode	Optional prop for custom badge
defaultExpanded	boolean	Flag indicating if node is expanded by default
expandedIcon	React.ReactNode	Expanded icon of a tree view item
hasBadge	boolean	Flag indicating if a tree view item has a badge
hasCheck	boolean	Flag indicating if a tree view item has a checkbox
icon	React.ReactNode	Default icon of a tree view item
id	string	ID of a tree view item
title	React.ReactNode	Title a tree view item. Only used in Compact presentations.

TreeViewSearch

*required
Name	Type	Description
aria-label	string	Accessible label for the search input
className	string	Classes applied to the wrapper for the search input
id	string	Id for the search input
name	string	Name for the search input
onSearch	(event: React.ChangeEvent<HTMLInputElement>) => void	Callback for search input

CSS variables

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines