I have some React code here and I'm trying to display dashed lines on the left of a tree. How can I achieve this effect?
I am looking for something similar to this:
https://i.sstatic.net/w64VL.png
Additionally, I want to combine the style of TreeView with the following code snippet:
const StyledTreeItem = withStyles((theme) => ({
iconContainer: {
'& .close': {
opacity: 0.3,
},
},
group: {
marginLeft: 2,
paddingLeft: 3,
borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
},
}))((props) => <TreeItem {...props} />);
"organizationalUnitsList": [
{
"organizationalUnitId": "",
"organizationalUnitName": "A",
"organizationalUnitsList": [
{
"organizationalUnitId": "",
"organizationalUnitName": "b",
}
]
},
{
"organizationalUnitId": "",
"organizationalUnitName": "C",
"organizationalUnitsList": [
{
"organizationalUnitId": "",
"organizationalUnitName": "D",
"organizationalUnitsList": [
{
"organizationalUnitId": "",
"organizationalUnitName": "e",
}
]
}
]
},
{
"organizationalUnitId": "",
"organizationalUnitName": "f"
}
]
Currently, I don't want TreeView to display a borderBottom at OrganizationalUnitName like 'A', 'C', and 'D' as they will be considered parents of their child. I only want the child elements to show a borderBottom.
There are multiple organizationalUnitId values present, but whenever an array of objects is displayed, I want them to appear as children rather than parents. How can I accomplish this?