Skip to content

SimpleTreeView API

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

Component demos

Import

import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
// or
import { SimpleTreeView } 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.

NameTypeDefaultDescription
apiRef{ current?: { focusNode: func, getItem: func } }-

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

childrennode-

The content of the component.

classesobject-

Override or extend the styles applied to the component.

See CSS API below for more details.

defaultExpandedNodesArray<string>[]

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

defaultSelectedNodesany[]

Selected node 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.

expandedNodesArray<string>-

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

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.

multiSelectboolfalse

If true ctrl and shift will trigger multiselect.

onExpandedNodesChangefunc-

Callback fired when tree items are expanded/collapsed.

Signature:function(event: React.SyntheticEvent, nodeIds: array) => void
  • event The event source of the callback.
  • nodeIds The ids of the expanded nodes.
onNodeExpansionTogglefunc-

Callback fired when a tree item is expanded or collapsed.

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

Callback fired when tree items are focused.

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

Callback fired when a tree item is selected or deselected.

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

Callback fired when tree items are selected/deselected.

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

Selected node 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 MuiSimpleTreeView to change the default props of this component with the theme.


Slots

Slot nameClass nameDefault componentDescription
root.MuiSimpleTreeView-rootSimpleTreeViewRootElement rendered at the root.
collapseIconThe default icon used to collapse the node.
expandIconThe default icon used to expand the node.
endIconThe 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.