Folder Tree

Folder tree with create and picker dialogs

SaaSFile Management

Overview

FolderTree renders a hierarchical folder structure with expand/collapse toggles, selection state, disabled folder support, and an optional root-level entry. Used for folder navigation sidebars and folder picker dialogs.

Usage

import { FolderTree } from "@leanicon/web-builder-library/saas";

<FolderTree
  folders={[
    {
      id: "1",
      name: "Documents",
      path: "/Documents",
      parentId: null,
      status: "active",
      createdAt: "2024-01-01T00:00:00Z",
      updatedAt: "2024-01-01T00:00:00Z",
      createdBy: { id: "user-1", name: "John Doe", email: "[email protected]" },
      hasChildren: true,
      isExpanded: true,
      children: [
        {
          id: "1-1",
          name: "Projects",
          path: "/Documents/Projects",
          parentId: "1",
          status: "active",
          createdAt: "2024-01-01T00:00:00Z",
          updatedAt: "2024-01-01T00:00:00Z",
          createdBy: { id: "user-1", name: "John Doe", email: "[email protected]" },
          hasChildren: false,
          isExpanded: false,
          children: [],
        },
      ],
    },
  ]}
  onSelect={(folderId) => console.log("Selected:", folderId)}
/>;

Variants

Default

Home
Images

Default (Dark)

Home
Images

With Selection

Home

With Root Option

My Files
Documents

Loading

Empty

My Files