RichTreeView API

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

Component demos

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

Import

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

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

Props

Props of the native component are also available.

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

defaultExpandedNodes

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

Type:Array<string>

Default:[]

defaultSelectedNodes

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

Type:any

Default:[]

disabledItemsFocusable

If true, will allow focus on disabled items.

Type:bool

Default:false

disableSelection

If true selection is disabled.

Type:bool

Default:false

expandedNodes

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

Type:Array<string>

getItemId

Used to determine the string label for a given item.

Type:func

Default:`(item) => item.id`

Signature:

function(item: R) => string

item The item to check.

Returns: The id of the item.

getItemLabel

Used to determine the string label for a given item.

Type:func

Default:`(item) => item.label`

Signature:

function(item: R) => string

item The item to check.

Returns: The label of the item.

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.

Type:string

isItemDisabled

Used to determine if a given item should be disabled.

Type:func

Signature:

function(item: R) => boolean

item The item to check.

Returns: true if the item should be disabled.

multiSelect

If true ctrl and shift will trigger multiselect.

Type:bool

Default:false

onExpandedNodesChange

Callback fired when tree items are expanded/collapsed.

Type:func

Signature:

function(event: React.SyntheticEvent, nodeIds: array) => void

event The event source of the callback.
nodeIds The ids of the expanded nodes.

onNodeExpansionToggle

Callback fired when a tree item is expanded or collapsed.

Type:func

Signature:

function(event: React.SyntheticEvent, nodeId: array, isExpanded: array) => void

event The event source of the callback.
nodeId The nodeId of the modified node.
isExpanded true if the node has just been expanded, false if it has just been collapsed.

onNodeFocus

Callback fired when tree items are focused.

Type:func

Signature:

function(event: React.SyntheticEvent, nodeId: string, value: string) => void

event The event source of the callback Warning: This is a generic event not a focus event.
nodeId The id of the node focused.
value of the focused node.

onNodeSelectionToggle

Callback fired when a tree item is selected or deselected.

Type:func

Signature:

function(event: React.SyntheticEvent, nodeId: array, isSelected: array) => void

event The event source of the callback.
nodeId The nodeId of the modified node.
isSelected true if the node has just been selected, false if it has just been deselected.

onSelectedNodesChange

Callback fired when tree items are selected/deselected.

Type:func

Signature:

function(event: React.SyntheticEvent, nodeIds: Array | string) => void

event The event source of the callback
nodeIds The ids of the selected nodes. When multiSelect is true, this is an array of strings; when false (default) a string.

selectedNodes

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

Type:any

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

See Slots API below for more details.

Type:object

Default:{}

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

Type:Array<func | object | bool> | func | object

The ref is forwarded to the root element.

Theme default props

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

Slots

root

Element rendered at the root.

Class name: .MuiRichTreeView-root

Default component: RichTreeViewRoot

item

Custom component for the item.

Default component: TreeItem.

collapseIcon

The default icon used to collapse the node.

expandIcon

The default icon used to expand the node.

endIcon

The default icon displayed next to an end node. This is applied to all tree nodes and can be overridden by the TreeItem icon slot prop.