전체 카탈로그
Table & ListTreeList4 props

Tree List

An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes ...

공식 문서 열기
live previewTable & List

Preview

Project files

  • app
    • component-live-preview.tsx93 live previews
    • components/[slug]detail route
  • globals.css

Import

import {TreeList} from '@astryxdesign/core/TreeList';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes ...

treehierarchynestedaccordionfolderexpandcollapsetreeview

Important props

densitycompact | balanced | spaciousoptional

Theming targets

astryx-tree-listastryx-tree-list-item

Best practices

  • DoProvide meaningful labels and icons for each node to make the hierarchy easy to scan.
  • DoPre-expand important branches so users see key content immediately.
  • Do notNest more than 4–5 levels deep; flatten the structure or use a different pattern.
  • Do notUse a tree for flat, non-hierarchical data; use a List instead.