reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/블록/DataTable

DataTable

블록

제네릭 데이터 테이블. 동적 컬럼 정의, Composite 기반 키보드 탐색.

data
관련 문서
npx @reopt-ai/opt-cli surface add data-table
100%

기본 사용

사용자 목록

이름이메일역할상태
김철수kim@example.comAdmin활성
이영희lee@example.comEditor활성
박민수park@example.comViewer비활성
최지은choi@example.comEditor활성
정우성jung@example.comViewer활성

빈 상태

빈 테이블

등록된 사용자가 없습니다

의존 컴포넌트

corecomposite-zonecorebuttoncorecheckbox

관련 컴포넌트

TreeTable

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

데이터

InlineEditTable

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

데이터

DomainTable

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

데이터

QueryResultsTable

쿼리 결과 테이블. SQL 쿼리 결과를 표시하며 로딩, 에러, 빈 상태를 지원합니다.

데이터

WidgetGrid

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

데이터

KanbanBoard

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

데이터워크플로우
이전DomainTable다음NotificationToast
NameSizeType
src
—
folder
index.ts
2.1 KB
file
utils
—
folder
package.json
1.2 KB
file
NameEmail
Alicealice@example.com
Bobbob@example.com

기본 사용

도메인 관리

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)
Widget A
Widget B
Widget C

To Do

2

Setup CI

Alice

Write tests

Bob

In Progress

1

Build UI

Charlie

Done

0