Patternfly Logo

Info alert:Beta feature

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

Examples

Default

With checkboxes

With icons

With badges

With action items

Props

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

CSS variables


View source on GitHub