Download to read offline
![var dataOne = [
{
id: 1,
name: 'Portfolio',
parent_id: undefined
},
{
id: 2,
name: 'Web Development',
parent_id: 1
},
{
id: 3,
name: 'Recent Works',
parent_id: 2
},
{
id: 4,
name: 'About Me',
parent_id: undefined
}
];
* Portfolio
* Web Development
* Recent Works
* About Me
array-to-tree(dataOne)](https://image.slidesharecdn.com/sharepointpnpdemo-react-display-hierarchy-210807145435/85/SharePoint-PnP-Demo-react-display-hierarchy-6-320.jpg)
![const initechOrg = {
name: "Bill Lumbergh",
actor: "Gary Cole",
children: [
{
name: "Peter Gibbons",
actor: "Ron Livingston",
children: [
{
name: "And More!!",
actor: "A complex tree with multiple
levels of children!"
}
]
},
{
name: "Milton Waddams",
actor: "Stephen Root"
},
{
name: "Bob Slydell",
actor: "John C. McGi..."
},
]
};
<OrgChart tree={initechOrg}
NodeComponent={MyNodeComponent} />](https://image.slidesharecdn.com/sharepointpnpdemo-react-display-hierarchy-210807145435/85/SharePoint-PnP-Demo-react-display-hierarchy-7-320.jpg)
Uploaded byNanddeep Nachan
SharePoint PnP Demo - react-display-hierarchy
This document discusses displaying hierarchical data in React. It provides an example of converting a flat array of data into a tree structure using the array-to-tree function. It also shows an example of rendering an organizational chart using the react-orgchart component with a nested data structure. Various use cases for displaying hierarchical data in areas like company management, project structures, and family trees are mentioned.
More Related Content
More from Nanddeep Nachan
SharePoint PnP Demo - react-display-hierarchy
- 1. React - DisplayHierarchy react-display-hierarchy Nanddeep Nachan (@NanddeepNachan)
- 2. Nanddeep Nachan Consultant -SharePoint, Office 365, MS Azure Speaker | Author | Blogger C# Corner MVP Microsoft Certified Professional Certified Scrum Master (CSM) Certified Professional Photographer @NanddeepNachan Nanddeep.nachan /in/nanddeepnachan nanddeepnachan NanddeepNachan@gmail.com nanddeepn
- 3.
- 5.
- 6. var dataOne =[ { id: 1, name: 'Portfolio', parent_id: undefined }, { id: 2, name: 'Web Development', parent_id: 1 }, { id: 3, name: 'Recent Works', parent_id: 2 }, { id: 4, name: 'About Me', parent_id: undefined } ]; * Portfolio * Web Development * Recent Works * About Me array-to-tree(dataOne)
- 7. const initechOrg ={ name: "Bill Lumbergh", actor: "Gary Cole", children: [ { name: "Peter Gibbons", actor: "Ron Livingston", children: [ { name: "And More!!", actor: "A complex tree with multiple levels of children!" } ] }, { name: "Milton Waddams", actor: "Stephen Root" }, { name: "Bob Slydell", actor: "John C. McGi..." }, ] }; <OrgChart tree={initechOrg} NodeComponent={MyNodeComponent} />
- 8. sp-pnp-js array-to-tree react-orgchart SharePoint Online SharePointList Client-side web part
- 11. Company Management HierarchyProject-based Structure Document Library Structure Resource Hierarchy for Access Control Supply Chain Hierarchy Family Tree
- 12.