RichTreeViewPro API

API reference docs for the React RichTreeViewPro component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
// or
import { RichTreeViewPro } from '@mui/x-tree-view-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
apiRef	{ current?: { focusItem?: func, getItem?: func, getItemDOMElement?: func, getItemOrderedChildrenIds?: func, getItemTree?: func, getParentId?: func, isItemExpanded?: func, setEditedItem?: func, setIsItemDisabled?: func, setItemExpansion?: func, setItemSelection?: func, updateItemChildren?: func, updateItemLabel?: func } }	-	The ref object that allows Tree View manipulation. Can be instantiated with `useRichTreeViewApiProRef()`.
canMoveItemToNewPosition	func	-	Used to determine if a given item can move to some new position. Signature:`function(parameters: object, parameters.itemId: TreeViewItemId, parameters.oldPosition: TreeViewItemReorderPosition, parameters.newPosition: TreeViewItemReorderPosition) => boolean` `parameters` The params describing the item re-ordering. `parameters.itemId` The id of the item that is being moved to a new position. `parameters.oldPosition` The old position of the item. `parameters.newPosition` The new position of the item.
checkboxSelection	bool	false	Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
dataSource	{ getChildrenCount: func, getTreeItems: func }	-	The data source object.
dataSourceCache	{ clear: func, get: func, set: func }	-	The data source cache object.
defaultExpandedItems	Array<string>	[]	Expanded item ids. Used when the item's expansion is not controlled.
defaultSelectedItems	any	[]	Selected item ids. (Uncontrolled) When `multiSelect` is true this takes an array of strings; when false (default) a string.
disabledItemsFocusable	bool	false	Whether the items should be focusable when disabled.
disableSelection	bool	false	Whether selection is disabled.
domStructure	'flat' \| 'nested'	'flat' when using virtualization, 'nested' otherwise	When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents). When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children). Nested DOM structure is not compatible with collapse / expansion animations.
expandedItems	Array<string>	-	Expanded item ids. Used when the item's expansion is controlled.
expansionTrigger	'content' \| 'iconContainer'	'content'	The slot that triggers the item's expansion when clicked.
getItemChildren	func	(item) => item.children	Used to determine the children of a given item. Signature:`function(item: R) => Array<R>` `item` The item to check.
getItemId	func	(item) => item.id	Used to determine the id of a given item. Signature:`function(item: R) => TreeViewItemId` `item` The item to check.
getItemLabel	func	(item) => item.label	Used to determine the string label for a given item. Signature:`function(item: R) => string` `item` The item to check.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
isItemDisabled	func	-	Used to determine if a given item should be disabled. Signature:`function(item: R) => boolean` `item` The item to check.
isItemEditable	func \| bool	() => false	Determine if a given item can be edited.
isItemReorderable	func	() => true	Determine if a given item can be reordered. Signature:`function(itemId: TreeViewItemId) => boolean` `itemId` The id of the item to check.
isItemSelectionDisabled	func	-	Used to determine if a given item should have selection disabled. Signature:`function(item: R) => boolean` `item` The item to check.
itemChildrenIndentation	number \| string	12px	Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em".
itemHeight	number	-	Sets the height in pixel of an item. If not provided, no height restriction is applied to the tree item content element.
itemsReordering	bool	false	If `true`, the reordering of items is enabled.
multiSelect	bool	false	Whether multiple items can be selected.
onExpandedItemsChange	func	-	Callback fired when Tree Items are expanded/collapsed. Signature:`function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId>) => void` `event` The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method. `itemIds` The ids of the expanded items.
onItemClick	func	-	Callback fired when the `content` slot of a given Tree Item is clicked. Signature:`function(event: React.MouseEvent, itemId: TreeViewItemId) => void` `event` The DOM event that triggered the change. `itemId` The id of the focused item.
onItemExpansionToggle	func	-	Callback fired when a Tree Item is expanded or collapsed. Signature:`function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId, isExpanded: boolean) => void` `event` The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method. `itemId` The itemId of the modified item. `isExpanded` `true` if the item has just been expanded, `false` if it has just been collapsed.
onItemFocus	func	-	Callback fired when a given Tree Item is focused. Signature:`function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId) => void` `event` The DOM event that triggered the change. Warning: This is a generic event not a focus event. `itemId` The id of the focused item.
onItemLabelChange	func	-	Callback fired when the label of an item changes. Signature:`function(itemId: TreeViewItemId, newLabel: string) => void` `itemId` The id of the item that was edited. `newLabel` The new label of the items.
onItemPositionChange	func	-	Callback fired when a Tree Item is moved in the tree. Signature:`function(parameters: object, parameters.itemId: TreeViewItemId, parameters.oldPosition: TreeViewItemReorderPosition, parameters.newPosition: TreeViewItemReorderPosition) => void` `parameters` The params describing the item re-ordering. `parameters.itemId` The id of the item moved. `parameters.oldPosition` The old position of the item. `parameters.newPosition` The new position of the item.
onItemSelectionToggle	func	-	Callback fired when a Tree Item is selected or deselected. Signature:`function(event: React.SyntheticEvent, itemId: TreeViewItemId, isSelected: boolean) => void` `event` The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method. `itemId` The itemId of the modified item. `isSelected` `true` if the item has just been selected, `false` if it has just been deselected.
onSelectedItemsChange	func	-	Callback fired when Tree Items are selected/deselected. Signature:`function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId> \| TreeViewItemId) => void` `event` The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method. `itemIds` The ids of the selected items. When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
selectedItems	any	-	Selected item ids. (Controlled) When `multiSelect` is true this takes an array of strings; when false (default) a string.
selectionPropagation	{ descendants?: bool, parents?: bool }	{ parents: false, descendants: false }	When `selectionPropagation.descendants` is set to `true`. - Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically. When `selectionPropagation.parents` is set to `true`. - Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically. Only works when `multiSelect` is `true`. On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
sx	Array<func \| object \| bool> \| func \| object	-	The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
virtualization	bool	false	Whether virtualization is enabled. If true, the DOM structure will be set to 'flat'. If true and no itemHeight is provided, a default item height of 32px will be used for calculating the virtualization.

The ref is forwarded to the root element.

Theme default props

You can use MuiRichTreeViewPro to change the default props of this component with the theme.

Slots

Slot name	Class name	Default component	Description
root	.MuiRichTreeViewPro-root	`RichTreeViewProRoot`	Element rendered at the root.
collapseIcon			The default icon used to collapse the item.
expandIcon			The default icon used to expand the item.
endIcon			The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
item	.MuiRichTreeViewPro-item	`TreeItem.`	Custom component to render a Tree Item.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.MuiRichTreeViewPro-itemCheckbox	itemCheckbox	Styles applied to the item's checkbox element.
.MuiRichTreeViewPro-itemContent	itemContent	Styles applied to the item's content element.
.MuiRichTreeViewPro-itemDragAndDropOverlay	itemDragAndDropOverlay	Styles applied to the item's drag and drop overlay element.
.MuiRichTreeViewPro-itemErrorIcon	itemErrorIcon	Styles applied to the item's error icon element
.MuiRichTreeViewPro-itemGroupTransition	itemGroupTransition	Styles applied to the item's transition element.
.MuiRichTreeViewPro-itemIconContainer	itemIconContainer	Styles applied to the item's icon container element icon.
.MuiRichTreeViewPro-itemLabel	itemLabel	Styles applied to the item's label element.
.MuiRichTreeViewPro-itemLabelInput	itemLabelInput	Styles applied to the item's label input element (visible only when editing is enabled).
.MuiRichTreeViewPro-itemLoadingIcon	itemLoadingIcon	Styles applied to the item's loading icon element

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.