Material-UI tree editable items

Question

I am using RichTreeView component from Material-UI lib and would like to create an editable tree: so when user click on particular button positioned after every item dropdown list pops up. I tried to somehow return jsx inside items, but without succes.

<RichTreeView items={MUI_X_PRODUCTS} />

I tried several ways, but it doesn't work as it worked in the previous version. For instance:

function getItemLabel(item: any) {
//return item.label + "  +X ";
return (
<div>
<Button size="small" variant="contained" style= {{ marginLeft: 8 }}>
    Action
  </Button>
</div>
);
}

I also tried to play with items array, but got message that jsx is not allowed there. https://codesandbox.io/p/sandbox/editable-tree-7ksrx8?file=%2Fsrc%2FDemo.tsx%3A45%2C5

Thanks.

Answer 1

You can create a custom TreeItem component:

import { TreeItem, TreeItemProps } from "@mui/x-tree-view";

const CustomTreeItem = ({ label, ...props }: TreeItemProps) => {
  const handleEditClick = () => {
    // TODO: Implement editing logic
    console.log(`Editing item: ${props.itemId}`);
  };

  return (
    <TreeItem
      label={
        <Stack direction="row" justifyContent="space-between">
          {label}
          {!props.children && <button onClick={handleEditClick}>Edit</button>}
        </Stack>
      }
      {...props}
    />
  );
};

And the use it in the item slot:

<RichTreeView items={MUI_X_PRODUCTS} slots={{ item: CustomTreeItem }} />

I used !props.children condition, assuming you have only 1 level of nested elements, and don't want the parents to be editable, but for sure you can improve that based on your needs.