Skip to Content
Patternfly Logo

Tree view

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesPropsCSS Variables

Examples

Default

With checkboxes

With icons

With badges

With action items

Props

TreeView properties
NameTypeRequiredDefaultDescription
dataTreeViewDataItem[]YesData of the tree view
idstringNoID of the tree view
isNestedbooleanNofalseFlag indicating if the tree view is nested
hasChecksbooleanNofalseFlag indicating if all nodes in the tree view should have checkboxes
hasBadgesbooleanNofalseFlag indicating if all nodes in the tree view should have badges
iconReact.ReactNodeNoIcon for all leaf or unexpanded node items
expandedIconReact.ReactNodeNoIcon for all expanded node items
defaultAllExpandedbooleanNofalseSets the default expanded behavior
onSelect(event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidNoCallback for item selection
onCheck(event: React.ChangeEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => voidNoCallback for item checkbox selection
onSearch(event: React.ChangeEvent<HTMLInputElement>) => voidNoCallback for search input
searchPropsanyNoAdditional props for search input
activeItemsTreeViewDataItem[]NoActive items of tree view
parentItemTreeViewDataItemNoInternal. Parent item of a TreeViewListItem
compareItems(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => booleanNo(item, itemToCheck) => item.id === itemToCheck.idComparison function for determining active items
TreeViewList properties
NameTypeRequiredDefaultDescription
isNestedbooleanNofalseFlag indicating if the tree view is nested under another tree view
onSearch(event: React.ChangeEvent<HTMLInputElement>) => voidNoCallback for search input
searchPropsanyNoAdditional props for search input
childrenReact.ReactNodeYesChild nodes of the current tree view
TreeViewListItem properties
NameTypeRequiredDefaultDescription
nameReact.ReactNodeYesInternal content of a tree view item
idstringNoID of a tree view item
defaultExpandedbooleanNofalseFlag indicating if node is expanded by default
childrenReact.ReactNodeNonullChild nodes of a tree view item
onSelect(event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => voidNoCallback for item selection
onCheck(event: React.ChangeEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => voidNoCallback for item checkbox selection
hasCheckbooleanNofalseFlag indicating if a tree view item has a checkbox
checkPropsanyNo{ checked: false }Additional properties of the tree view item checkbox
hasBadgebooleanNofalseFlag indicating if a tree view item has a badge
badgePropsanyNo{ isRead: true }Additional properties of the tree view item badge
activeItemsTreeViewDataItem[]No[]Active items of tree view
itemDataTreeViewDataItemNoData structure of tree view item
parentItemTreeViewDataItemNoParent item of tree view item
iconReact.ReactNodeNoDefault icon of a tree view item
expandedIconReact.ReactNodeNoExpanded icon of a tree view item
actionReact.ReactNodeNoAction of a tree view item, nested inside a button
actionPropsanyNo{ onClick: (evt: React.MouseEvent) => { evt.stopPropagation(); evt.preventDefault(); onSelect && onSelect(evt, itemData, parentItem); } }Additional properties of the tree view item action button
compareItems(item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => booleanNoCallback for item comparison function

CSS Variables