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