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
