Material-UI: How to add border in TreeView

Question

Here, I have a code in React. I want to show dashed lines on the left of the tree.

How can I do that?

I need something like this:

And, I want to merge the style of TreeView with this code:

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"
    }

]

Now, I want TreeView to not show borderBottom at OrganizationalUnitName as 'A','C' and 'D'. Because they will be acting as a parent of their child. I want child to show borderBottom not the parent.

There are multiple organizationalUnitId. But whenever array of objects appears, I want objects to appear as a child not the parent.

How can I do that?

Something like this? https://nimb.ws/MB6HkA What do you mean by merging the style of treeview? — m4n0, Apr 05 '21 at 04:36
Yes exactly like that. I need a solid line instead of dashed ones in design. — progpro, Apr 05 '21 at 06:55

NearHuscarl · Accepted Answer · 2021-10-16T21:18:19.067

3

The example in this docs demonstrates how to add vertical border to the TreeItem. To add horizontal border, you can create a pseudo element for each TreeItem and use absolute position to place them correctly. Here is an example:

import TreeItem, { treeItemClasses } from "@mui/lab/TreeItem";

type StyledTreeItemProps = {
  rootNode?: boolean;
};

const StyledTreeItem = styled(TreeItem)<StyledTreeItemProps>(({ rootNode }) => {
  const borderColor = "gray";

  return {
    position: "relative",
    "&:before": {
      pointerEvents: "none",
      content: '""',
      position: "absolute",
      width: 32,
      left: -16,
      top: 12,
      borderBottom:
        // only display if the TreeItem is not root node
        !rootNode ? `1px dashed ${borderColor}` : "none"
    },

    [`& .${treeItemClasses.group}`]: {
      marginLeft: 16,
      paddingLeft: 18,
      borderLeft: `1px dashed ${borderColor}`
    }
  };
});

Usage

<TreeView>
  <StyledTreeItem rootNode nodeId="1" label="Applications">
    <StyledTreeItem nodeId="2" label="Calendar" />
    <StyledTreeItem nodeId="3" label="Drive" />
  </StyledTreeItem>
  <StyledTreeItem rootNode nodeId="8" label="Documents">
    <StyledTreeItem nodeId="9" label="OSS" />
    <StyledTreeItem nodeId="10" label="MUI">
      <StyledTreeItem nodeId="11" label="index.js" />
    </StyledTreeItem>
  </StyledTreeItem>
</TreeView>

Live Demo

V5

V4

edited Oct 16 '21 at 21:18

answered Apr 05 '21 at 05:03

NearHuscarl

38,825
11
144
140

Can you do that when it is parent then border should not be shown but if there is child then lines should be shown??? – progpro Apr 05 '21 at 08:43
@progpro you mean the root node? See my updated answer if it helps. – NearHuscarl Apr 05 '21 at 09:33
I have array of objects and it has key which is "OrganizationalUnitId". I have replaced in your code "nodeId" part with this new one. But its not working. Because in that array, there are multiple arrays too which have objects(which will act as a child in TreeView). And I don't want the parent to show border. I want the child to show that. What you have provided me is applicable only on parent which has nodeId=1 not on other arrays. How to do that?? Do you have any other alternatives?? How can I do this for multiple nodes?? How can I tell TreeView for multiple nodes?? – progpro Apr 05 '21 at 10:12
I want to do it for multiple nodes. I don't want just for one node ie nodeId=1. – progpro Apr 05 '21 at 10:18
If you need anything from my end please do let me know – progpro Apr 05 '21 at 10:19
@progpro can you add that code in your question. and also add a picture to show me where you want the border to be removed. – NearHuscarl Apr 05 '21 at 10:30
What you have done is ok.. I don't want the parent to show borderBottom but the child. But there can be multiple nodeId as I have updated in my question there is OrganizationUnitId. I want to show them as a parent with no border. But when array of objects appears in them, then child should show the borderBottom dashed line. – progpro Apr 05 '21 at 10:50
@progpro updated both the answer and the live demo again. Hope it works for you this time. – NearHuscarl Apr 05 '21 at 10:59
Can you please help me out in this question? https://stackoverflow.com/questions/66961437/material-ui-how-can-i-style-native-select-in-reactjs – progpro Apr 06 '21 at 00:57
this does not show the end line of a treenode, it just draws a line straight down. how would one fix that? so the last node of a tree section has the correct line drawn – JokerMartini Feb 08 '22 at 12:50

Material-UI: How to add border in TreeView

1 Answers1

Usage

Live Demo