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 ...
공식 문서 열기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.