TreeView API
API reference docs for the React TreeView component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { TreeView } from '@mui/x-tree-view/TreeView';
// or
import { TreeView } from '@mui/x-tree-view';
// or
import { TreeView } from '@mui/x-tree-view-pro';
Learn about the difference by reading this guide on minimizing bundle size.
This component has been deprecated in favor of the new SimpleTreeView
component.
You can have a look at how to migrate to the new component in the v7 migration guide
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
apiRef | { current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func } } | - | The ref object that allows Tree View manipulation. Can be instantiated with |
checkboxSelection | bool | false | If |
children | node | - | The content of the component. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
defaultExpandedItems | Array<string> | [] | Expanded item ids. Used when the item's expansion is not controlled. |
defaultSelectedItems | any | [] | Selected item ids. (Uncontrolled) When |
disabledItemsFocusable | bool | false | If |
disableSelection | bool | false | If |
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. |
experimentalFeatures | { indentationAtItemLevel?: bool } | - | Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to |
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. |
itemChildrenIndentation | number | string | 12px | Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em". |
multiSelect | bool | false | If |
onExpandedItemsChange | func | - | Callback fired when tree items are expanded/collapsed. Signature: function(event: React.SyntheticEvent, itemIds: array) => void
|
onItemClick | func | - | Callback fired when the Signature: function(event: React.MouseEvent, itemId: string) => void
|
onItemExpansionToggle | func | - | Callback fired when a tree item is expanded or collapsed. Signature: function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void
|
onItemFocus | func | - | Callback fired when a given tree item is focused. Signature: function(event: React.SyntheticEvent | null, itemId: string) => void
|
onItemSelectionToggle | func | - | Callback fired when a tree item is selected or deselected. Signature: function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void
|
onSelectedItemsChange | func | - | Callback fired when tree items are selected/deselected. Signature: function(event: React.SyntheticEvent, itemIds: Array
|
selectedItems | any | - | Selected item ids. (Controlled) When |
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. |
ref
is forwarded to the root element.Theme default props
You can use MuiTreeView
to change the default props of this component with the theme.
Slot name | Class name | Default component | Description |
---|---|---|---|
root | .MuiTreeView-root | SimpleTreeViewRoot | 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. |
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.