Skip to content

RichTreeViewPro API

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

Demos

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.

NameTypeDefaultDescription
apiRef{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func, updateItemLabel: func } }-

The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef().

canMoveItemToNewPositionfunc-

Used to determine if a given item can move to some new position.

Signature:function(params: object, params.itemId: string, params.oldPosition: TreeViewItemReorderPosition, params.newPosition: TreeViewItemReorderPosition) => boolean
  • params The params describing the item re-ordering.
  • params.itemId The id of the item that is being moved to a new position.
  • params.oldPosition The old position of the item.
  • params.newPosition The new position of the item.

Returns: true if the item can move to the new position.

checkboxSelectionboolfalse

If true, the tree view renders a checkbox at the left of its label that allows selecting it.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

defaultExpandedItemsArray<string>[]

Expanded item ids. Used when the item's expansion is not controlled.

defaultSelectedItemsany[]

Selected item ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string.

disabledItemsFocusableboolfalse

If true, will allow focus on disabled items.

disableSelectionboolfalse

If true selection is disabled.

expandedItemsArray<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.

experimentalFeatures{ indentationAtItemLevel?: bool, itemsReordering?: bool, labelEditing?: bool }-

Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.

getItemIdfunc(item) => item.id

Used to determine the id of a given item.

Signature:function(item: R) => string
  • item The item to check.

Returns: The id of the item.

getItemLabelfunc(item) => item.label

Used to determine the string label for a given item.

Signature:function(item: R) => string
  • item The item to check.

Returns: The label of the item.

idstring-

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.

isItemDisabledfunc-

Used to determine if a given item should be disabled.

Signature:function(item: R) => boolean
  • item The item to check.

Returns: true if the item should be disabled.

isItemEditablefunc
| bool
-

Determines if a given item is editable or not. Make sure to also enable the labelEditing experimental feature: <RichTreeViewPro experimentalFeatures={{ labelEditing: true }} />. By default, the items are not editable.

isItemReorderablefunc() => true

Used to determine if a given item can be reordered.

Signature:function(itemId: string) => boolean
  • itemId The id of the item to check.

Returns: true if the item can be reordered.

itemChildrenIndentationnumber
| string
12px

Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em".

itemsReorderingboolfalse

If true, the reordering of items is enabled. Make sure to also enable the itemsReordering experimental feature: <RichTreeViewPro experimentalFeatures={{ itemsReordering: true }} itemsReordering />.

multiSelectboolfalse

If true, ctrl and shift will trigger multiselect.

onExpandedItemsChangefunc-

Callback fired when tree items are expanded/collapsed.

Signature:function(event: React.SyntheticEvent, itemIds: array) => void
  • event The DOM event that triggered the change.
  • itemIds The ids of the expanded items.
onItemClickfunc-

Callback fired when the content slot of a given tree item is clicked.

Signature:function(event: React.MouseEvent, itemId: string) => void
  • event The DOM event that triggered the change.
  • itemId The id of the focused item.
onItemExpansionTogglefunc-

Callback fired when a tree item is expanded or collapsed.

Signature:function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void
  • event The DOM event that triggered the change.
  • itemId The itemId of the modified item.
  • isExpanded true if the item has just been expanded, false if it has just been collapsed.
onItemFocusfunc-

Callback fired when a given tree item is focused.

Signature:function(event: React.SyntheticEvent | null, itemId: string) => 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.
onItemLabelChangefunc-

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.
onItemPositionChangefunc-

Callback fired when a tree item is moved in the tree.

Signature:function(params: object, params.itemId: string, params.oldPosition: TreeViewItemReorderPosition, params.newPosition: TreeViewItemReorderPosition) => void
  • params The params describing the item re-ordering.
  • params.itemId The id of the item moved.
  • params.oldPosition The old position of the item.
  • params.newPosition The new position of the item.
onItemSelectionTogglefunc-

Callback fired when a tree item is selected or deselected.

Signature:function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void
  • event The DOM event that triggered the change.
  • itemId The itemId of the modified item.
  • isSelected true if the item has just been selected, false if it has just been deselected.
onSelectedItemsChangefunc-

Callback fired when tree items are selected/deselected.

Signature:function(event: React.SyntheticEvent, itemIds: Array | string) => void
  • event The DOM event that triggered the change.
  • itemIds The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string.
selectedItemsany-

Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

Overridable component slots.

See Slots API below for more details.

sxArray<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.

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 nameClass nameDefault componentDescription
root.MuiRichTreeViewPro-rootRichTreeViewProRootElement rendered at the root.
itemTreeItem.Custom component for the item.
collapseIconThe default icon used to collapse the item.
expandIconThe default icon used to expand the item.
endIconThe 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.

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.