Tree

Foundation Tree를 래핑한 CALS 전용 트리 컴포넌트입니다.

접기/펼치기 가능한 헤더, 실시간 필터 검색, 데이터 속성 매핑, 스타일 오버라이드를 지원합니다.

주요 기능

• BasicUI: 계층 구조 데이터를 트리로 표시
• 검색: 인라인 필터(filter) / 조건 검색(static) / 검색 없음(none)
• 전체 펼치기/접기: 헤더 버튼으로 모든 노드를 한 번에 제어
• 접기 잠금: collapseDisabled로 항상 펼침 상태 고정
• 데이터 매핑: idKey, labelKey, childrenKey로 외부 데이터 필드 매핑
• 스타일 오버라이드: 배경색, 글자색, 글꼴, 크기, 테두리 등
• 빈 상태: 데이터 없을 시 커스텀 메시지 표시

기본 사용

import { Tree } from "@vortex/ui-cals"
 
const items = [
  {
    id: "1",
    label: "부서 A",
    children: [
      { id: "1-1", label: "팀 1" },
      { id: "1-2", label: "팀 2" },
    ],
  },
  { id: "2", label: "부서 B" },
]
 
<Tree items={items} title="조직도" />

인터랙티브 예시