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
Props
TreeView
Name | Type | Required | Default | Description |
---|---|---|---|---|
activeItems | TreeViewDataItem[] | No | Active items of tree view | |
compareItems | (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean | No | (item, itemToCheck) => item.id === itemToCheck.id | Comparison function for determining active items |
data | TreeViewDataItem[] | Yes | Data of the tree view | |
defaultAllExpanded | boolean | No | false | Sets the default expanded behavior |
expandedIcon | React.ReactNode | No | Icon for all expanded node items | |
hasBadges | boolean | No | false | Flag indicating if all nodes in the tree view should have badges |
hasChecks | boolean | No | false | Flag indicating if all nodes in the tree view should have checkboxes |
icon | React.ReactNode | No | Icon for all leaf or unexpanded node items | |
id | string | No | ID of the tree view | |
isNested | boolean | No | false | Flag indicating if the tree view is nested |
onCheck | (event: React.ChangeEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void | No | Callback for item checkbox selection | |
onSearch | (event: React.ChangeEvent<HTMLInputElement>) => void | No | Callback for search input | |
onSelect | (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void | No | Callback for item selection | |
parentItem | TreeViewDataItem | No | Internal. Parent item of a TreeViewListItem | |
searchProps | any | No | Additional props for search input |
TreeViewList
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | Yes | Child nodes of the current tree view | |
isNested | boolean | No | false | Flag indicating if the tree view is nested under another tree view |
onSearch | (event: React.ChangeEvent<HTMLInputElement>) => void | No | Callback for search input | |
searchProps | any | No | Additional props for search input |
TreeViewListItem
Name | Type | Required | Default | Description |
---|---|---|---|---|
action | React.ReactNode | No | Action of a tree view item, can be a Button or Dropdown | |
activeItems | TreeViewDataItem[] | No | [] | Active items of tree view |
badgeProps | any | No | { isRead: true } | Additional properties of the tree view item badge |
checkProps | CheckProps | No | { checked: false } | Additional properties of the tree view item checkbox |
children | React.ReactNode | No | null | Child nodes of a tree view item |
compareItems | (item: TreeViewDataItem, itemToCheck: TreeViewDataItem) => boolean | No | Callback for item comparison function | |
defaultExpanded | boolean | No | false | Flag indicating if node is expanded by default |
expandedIcon | React.ReactNode | No | Expanded icon of a tree view item | |
hasBadge | boolean | No | false | Flag indicating if a tree view item has a badge |
hasCheck | boolean | No | false | Flag indicating if a tree view item has a checkbox |
icon | React.ReactNode | No | Default icon of a tree view item | |
id | string | No | ID of a tree view item | |
itemData | TreeViewDataItem | No | Data structure of tree view item | |
name | React.ReactNode | Yes | Internal content of a tree view item | |
onCheck | (event: React.ChangeEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void | No | Callback for item checkbox selection | |
onSelect | (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void | No | Callback for item selection | |
parentItem | TreeViewDataItem | No | Parent item of tree view item |
CSS variables
View source on GitHub