Team Tree

Organizational team hierarchy tree

SaaSTenant Admin

Overview

TeamTree renders a collapsible tree structure of teams within an organization. Each node displays the team name and member count. Nodes with children can be expanded or collapsed, and a selected team is visually highlighted.

Usage

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

<TeamTree
  teams={[
    {
      id: "org",
      name: "Acme Corp",
      memberCount: 30,
      children: [
        { id: "eng", name: "Engineering", memberCount: 15, children: [] },
        { id: "sales", name: "Sales", memberCount: 15, children: [] },
      ],
    },
  ]}
  selectedTeamId="eng"
  onSelectTeam={(id) => console.log(id)}
/>;

Variants

Default

Acme Corp

Dark

Acme Corp

Empty

No teams found

Flat

Marketing

Support

Finance

Props

Name	Type	Default	Required
`teams`	`TeamTreeNode[]`	—	Yes
`selectedTeamId`	`string`	—	No
`onSelectTeam`	`(teamId: string) => void`	—	Yes
`onExpandToggle`	`((teamId: string) => void)`	—	No