Skip to content

RichTreeView API

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

Component demos

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

className

className applied to the root element.

Type:string

defaultCollapseIcon

The default icon used to collapse the node.

Type:node

defaultEndIcon

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

Type:node

defaultExpandedNodes

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

Type:Array<string>

Default:[]

defaultExpandIcon

The default icon used to expand the node.

Type:node

defaultParentIcon

The default icon displayed next to a parent node. This is applied to all parent nodes and can be overridden by the TreeItem icon prop.

Type:node

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.

id

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:{}

sx

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.

CSS classes

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

.MuiRichTreeView-root

Styles applied to the root element.

Rule name:root


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