Can custom item properties received asynchronously with MUI - RichTreeView be exposed inside a custom treeItem?
For instance, how can the customProperty1 and customProperty2 be accessed within the CustomTreeItem? The console.log to props only shows default properties like id, label, etc.
I opted for RichTreeView because my dataset is going to be extensive.
const ITEMS = [
{
id: '1',
label: 'label1',
customProperty1: false,
customProperty2: 'ADD',
},
const CustomTreeItem = forwardRef((props, ref) => {
const { id, itemId, label, disabled, children, ...other } = props;
const { getRootProps, getContentProps, getIconContainerProps, getLabelProps, getGroupTransitionProps, status } = useTreeItem2({
id,
itemId,
children,
label,
disabled,
rootRef: ref,
});
console.log('props', props);
return (
<TreeItem2Provider itemId={itemId}>
<TreeItem2Root {...getRootProps(other)}>
<CustomTreeItemContent {...getContentProps()}>
<Box sx={{ flexGrow: 1 }}>
<Stack direction="row" alignItems="center">
<TreeItem2IconContainer {...getIconContainerProps()}>
<TreeItem2Icon status={status} />
</TreeItem2IconContainer>
<TreeItem2Label {...getLabelProps()} />
</Stack>
{!children && (
<Stack direction="row" justifyContent="flex-start" sx={{ pl: 2, ml: 2, mt: 1, backgroundColor: '#2F3B5F', borderRadius: 10, px: 2, my: 1 }}>
All spare parts (xxxxx)
<Stack sx={{ ml: 'auto' }}>(folder icon here)</Stack>
</Stack>
)}
</Box>
</CustomTreeItemContent>
{children && <TreeItem2GroupTransition {...getGroupTransitionProps()} />}
</TreeItem2Root>
</TreeItem2Provider>
);
});
<RichTreeView
aria-label="icon expansion"
sx={{ position: 'relative' }}
items={ITEMS}
slots={{ item: CustomTreeItem }}
/>
Edit: A possible solution could be adding this code inside the CustomTreeItem, but there are concerns about potential slowdowns in rendering with huge datasets.
console.log('customProperty1', ITEMS.find((item) => item.id === itemId)?.customProperty1);