Tree View in React

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>

  );