reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

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

© 2026 reopt Inc. All rights reserved.

Explore/Shells/TreeTable

TreeTable

Shell

계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.

data
Related docs
npx @reopt-ai/opt-cli surface add tree-table
100%
NameSizeType
src
—
folder
index.ts
2.1 KB
file
utils
—
folder
package.json
1.2 KB
file

컴포넌트 의존 관계

깊이
▼ USES (1)TreeTabledata-table

테스트 커버리지

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

Related components

DataTable

제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다.

Data

DomainTable

도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.

Data

QueryResultsTable

쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.

Data

WidgetGrid

위젯 그리드. react-grid-layout 래퍼로 드래그/리사이즈 가능한 대시보드 위젯을 배치합니다.

Data

InlineEditTable

인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.

Data

KanbanBoard

칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.

DataWorkflow
PreviousColumnTogglerNextInlineEditTable

기본 사용

사용자 목록

이름이메일역할상태완료율
김철수kim@example.comAdmin활성0.82
이영희lee@example.comEditor활성1.2
박민수park@example.comViewer비활성—
최지은choi@example.comEditor활성-0.15
정우성jung@example.comViewer활성0.46

헤더를 눌러 정렬하고, 컬럼 경계에 포커스한 뒤 ←/→(Shift는 40px)로 너비를 바꿀 수 있습니다. 완료율은 범위를 벗어나거나 NaN이어도 0–100% 사이로 안전하게 표시됩니다.

빈 상태

빈 테이블

등록된 사용자가 없습니다

기본 사용

도메인 관리

DomainStatusSSLRedirectAdded
example.comActiveValid—2024-01-15
www.example.comActiveValidexample.com2024-01-15
api.example.comActiveValid—2024-02-01
staging.example.comPendingPending—2024-03-01
old.example.comErrorExpired—2023-06-01
#user_ideventtimestampproperties
1usr_001page_view2026-02-05 10:23:01{"path":"/home"}
2usr_002click2026-02-05 10:23:05{"button":"signup"}
3usr_001purchase2026-02-05 10:24:12{"amount":49}
4usr_003page_view2026-02-05 10:25:00{"path":"/pricing"}
4 row(s)

쿼리를 실행하고 있습니다...

warehouse connection timed out

조건에 맞는 결과가 없습니다

Widget A
Widget B
Widget C
NameEmail
Alicealice@example.com
Bobbob@example.com

To Do

2

Setup CI

Alice

Write tests

Bob

In Progress

1

Build UI

Charlie

Done

0