Treeview

new ac.navigations.TreeView(
    {
        fields: {
            dataStore: files,
            value: "id",
            text: "name",
            child: "folders",
            expanded: "expanded"
        }
    },
    "#cntlTreeview"
);

<div id="cntlTreeview"></div>

const files = [
    {
        id: "01",
        name: "Windows (C:)",
        expanded: true,
        folders: [
            {
                id: "01-01",
                name: "Program Files",
                folders: [
                    { id: "01-01-01", name: "Common Files" },
                    { id: "01-01-02", name: "Microsoft Office" },
                    { id: "01-01-03", name: "Windows Defender" }
                ]
            },
            {
                id: "01-02",
                name: "Users",
                expanded: true,
                folders: [
                    { id: "01-02-01", name: "Admin" },
                    { id: "01-02-02", name: "Julie" },
                    { id: "01-02-03", name: "Public" }
                ]
            },
            {
                id: "01-03",
                name: "Windows",
                folders: [
                    { id: "01-03-01", name: "Boot" },
                    { id: "01-03-02", name: "Fonts" },
                    { id: "01-03-03", name: "System32" }
                ]
            }
        ]
    },
    {
        id: "02",
        name: "Storage (D:)",
        folders: [
            {
                id: "02-01",
                name: "Personal",
                folders: [
                    { id: "02-01-01", name: "Profile picture.png" },
                    { id: "02-01-02", name: "Bank Statement.pdf" },
                    { id: "02-01-03", name: "Tax Return.pdf" }
                ]
            },
            {
                id: "02-02",
                name: "Development",
                folders: [
                    { id: "02-02-01", name: ".NET Core App" },
                    { id: "02-02-02", name: "Android App" },
                    { id: "02-02-03", name: "iOS App" }
                ]
            },
            {
                id: "02-03",
                name: "Work",
                folders: [
                    { id: "02-03-01", name: "Project Plan.pptx" },
                    { id: "02-03-02", name: "Standup Notes.docx" },
                    { id: "02-03-03", name: "Client list.csv" }
                ]
            }
        ]
    },
    {
        id: "03",
        name: "Local Disk (E:)",
        icon: "folder",
        folders: [
            {
                id: "03-01",
                name: "Pictures",
                folders: [
                    { id: "03-01-01", name: "Picture 1.png" },
                    { id: "03-01-02", name: "Picture 2.png" },
                    { id: "03-01-03", name: "Picture 3.png" }
                ]
            },
            {
                id: "03-02",
                name: "Games",
                folders: [
                    { id: "03-02-01", name: "Fallout Guide.docx" },
                    { id: "03-02-02", name: "My Favorite Games.pptx" },
                    { id: "03-02-03", name: "Halo Guide.pdf" }
                ]
            },
            {
                id: "03-03",
                name: "Emails",
                folders: [
                    { id: "03-03-01", name: "Contract.eml" },
                    { id: "03-03-02", name: "Your new car.eml" },
                    { id: "03-03-03", name: "My Email.eml" }
                ]
            }
        ]
    }
];