Tree Item Customization

Learn how to customize the Tree Item component.

Basics

Change nested item's indentation

Use the itemChildrenIndentation prop to change the indentation of the nested items. By default, a nested item is indented by 12px from its parent item.

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  itemChildrenIndentation={24}
  defaultExpandedItems={['grid']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  itemChildrenIndentation={24}
  defaultExpandedItems={['grid']}
/>

Press Enter to start editing

This feature is compatible with both the TreeItem and TreeItem2 components If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your groupTransition element:

const CustomTreeItem2GroupTransition = styled(TreeItem2GroupTransition)(({ theme }) => ({
  // ...other styles
  paddingLeft: `var(--TreeView-itemChildrenIndentation)`,
}

If you are using the indentationAtItemLevel prop, then instead apply the following padding to your content element:

const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
  // ...other styles
  paddingLeft:
      `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
}

Apply the nested item's indentation at the item level

By default, the indentation of nested items is applied by the groupTransition slot of its parent (i.e.: the DOM element that wraps all the children of a given item). This approach is not compatible with upcoming features like the reordering of items using drag & drop.

To apply the indentation at the item level (i.e.: have each item responsible for setting its own indentation using the padding-left CSS property on its content slot), you can use the indentationAtItemLevel experimental feature. It will become the default behavior in the next major version of the Tree View component.

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView
  items={MUI_X_PRODUCTS}
  experimentalFeatures={{ indentationAtItemLevel: true }}
  defaultExpandedItems={['grid']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  experimentalFeatures={{ indentationAtItemLevel: true }}
  defaultExpandedItems={['grid']}
/>

Press Enter to start editing

This feature is compatible with both the TreeItem and TreeItem2 components and with the itemChildrenIndentation prop. If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your content element:

const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({
  // ...other styles
  paddingLeft:
      `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.