reactjsmaterial-uitreeview

Material-UI tree editable items


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.


Solution

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