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. To learn more go to our Beta components page on GitHub.
Examples
With memoization
Turning on memoization with the useMemo property helps prevent unnecessary re-renders for large data sets. With this flag active, activeItems must pass in an array of nodes along the selected item's path to update properly.
Props
TreeView
| 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 | |
| useMemo | boolean | Flag indicating the TreeView should utilize memoization to help render large data sets. Setting this property requires that `activeItems` pass in an array containing every node in the selected item's path. | |
| variant | 'default' | 'compact' | 'compactNoBackground' | 'default' | Variant presentation styles for the tree view. |
TreeViewDataItem
| Name | Type | Default | 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
| Name | Type | Default | 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
