Command To Install Tree View
npm install react-treeview
Import in JS file
import TreeView from "react-treeview";
import "react-treeview/react-treeview.css";
Datasource/Array of Array for tree view
const dataSource = [
{
type: "Employees",
collapsed: false,
people: [
{
name: "Saikumar",
age: 25,
sex: "male",
role: "Developer",
collapsed: false
},
{
name: "Suresh",
age: 23,
sex: "Male",
role: "Tester",
collapsed: false,
},
],
},
{
type: "CEO",
collapsed: false,
people: [
{
name: "Krishna",
age: 33,
sex: "male",
role: "boss",
collapsed: false,
},
],
},
];
In html of js
return (
<div className="MainDiv">
<div class="container">
{dataSource.map((node, i) => {
const type = node.type;
const label = <span className="node">{type}</span>;
return (
<TreeView
key={type + "|" + i}
nodeLabel={label}
defaultCollapsed={true}
>
{node.people.map((person) => {
const label2 = <span className="node">{person.name}</span>;
return (
<TreeView
nodeLabel={label2}
key={person.name}
defaultCollapsed={true}
>
<div className="info">age: {person.age}</div>
<div className="info">sex: {person.sex}</div>
<div className="info">role: {person.role}</div>
</TreeView>
);
})}
</TreeView>
);
})}
</div>
</div>
);
Comments
Post a Comment