reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
TreeTable
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

TreeTable

Shell

Explore hierarchical rows with recursive rendering and expand and collapse controls.

data
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { TreeTable } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%
NameSizeType
Level 1. src
—
folder
Level 2. index.ts
2.1 KB
file
Level 2. utils
—
folder
Level 3. cn.ts
0.5 KB
file
Level 1. package.json
1.2 KB
file

TreeTable

PropTypeDefaultDescription
dataRequiredTreeNode<T>[]—트리 노드 배열
columnsRequiredTreeColumnDef<T>[]—컬럼 정의
defaultExpandedstring[][]기본 펼침 노드 ID
indentSizenumber24들여쓰기 크기 (px)
getRowLabel(node: TreeNode<T>) => string—행별 펼침/접기 컨트롤의 접근 가능한 이름 생성기
aria-labelstring—표의 접근 가능한 이름
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▼ USES (1)TreeTabledata-table
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 루트 노드를 렌더링한다
  • 펼침 버튼을 클릭하면 자식이 표시된다

키보드 동작

키동작
Tab펼침/접기 컨트롤 사이 이동
Enter / Space하위 행 펼치기 또는 접기

Related components

opt-ui

DataTable

Shells

Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.

opt-ui

DomainTable

Shells

Manage domain rows in a Composite grid with keyboard navigation.

opt-ui

QueryResultsTable

Shells

Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.

opt-ui

WidgetGrid

Shells

Arrange draggable and resizable dashboard widgets with react-grid-layout.

opt-ui

InlineEditTable

Shells

Edit cells with a double click, confirm with Enter, and cancel with Escape.

opt-ui

KanbanBoard

Shells

Move cards between Kanban columns using HTML5 drag and drop.

PreviousColumnTogglerNextInlineEditTable