How can I populate a material ui tree with data in React - reactjs

Question

I'm using React and meterial-ui. The two components from material ui I am using are Collapsible Table and a Tree view inside it.
The data structure goes like this:
Projects -> workpackages -> work packages within work packages
So I list my projects in my table, then when you click the collapsible arrow it drops down and displays the work packges within that project in a tree, now I'm trying to figure out how to display sub trees within the tree if a work package has more work packages within it.
My goal is to populate the tree with some hardcoded data, then if it has another child object of data within it, create a sub tree.
I currently have it to where the tree is displaying within the table, but I can't figure out how to display a sub tree.
Columns for my table:
const columns = [
{ field: "project", title: "Project" },
{ field: "projectManager", title: "Project Manager" },
{ field: "startDate", title: "Start Date" },
{ field: "endDate", title: "End Date" },
];
Projects data for the table:
const projects = [
{
title: "Build Backend",
projectManager: "Bruce",
startDate: "12/12/12",
endDate: "12/12/16"
},
{
title: "Build Frontend",
projectManager: "Medhat",
startDate: "11/11/22",
endDate: "12/12/25"
}
]
My Table:
export default function CollapsibleTable() {
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell />
{columns.map((column) => (
<TableCell key={column.field}>
<Typography variant="body1">
<strong>{column.title}</strong>
</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{projects.map((row) => (
<Row key={row.title} row={row} />
))}
</TableBody>
</Table>
</TableContainer>
);
}
My work packages data, the first one has a sub work package within it 'package':
const workPackages = [
{
title: "Setup Database",
startDate: "01/12/22",
package: {
title: "Create Crud"
}
},
{
title: "Install express",
startDate: "01/11/12"
}
]
Table rows within my table that have the tree view:
function Row(props) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
{row.title}
</TableCell>
<TableCell >{row.projectManager}</TableCell>
<TableCell >{row.startDate}</TableCell>
<TableCell >{row.endDate}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<TreeView
aria-label="file system navigator"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
>
{workPackages.map((tree) => (
<TreeItem label={tree.title}>
</TreeItem>
))}
</TreeView>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
How it looks currently:
Table
How do I check and add a subtree to the tree for that package?

Answer 1

Read material ui docs (Multi selection section). They show how to add a tree in another one (subtree).