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/페이지/DataExplorer

DataExplorer

페이지

필터링 가능한 데이터 탐색 영역. compact SurfaceLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

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

기본 사용

상품 목록

총 7개 결과
상품명카테고리가격상태
MacBook Pro 14전자기기₩2,890,000활성
Magic Keyboard전자기기₩159,000활성
스탠딩 데스크가구₩450,000임시
에르고 체어가구₩890,000활성
모니터 암전자기기₩89,000보관
USB-C 허브전자기기₩79,000활성
책장가구₩250,000임시

의존 컴포넌트

shellssearch-comboboxshellsstatus-selectshellsdata-tablecoreloading-overlay

관련 컴포넌트

DataTable

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

데이터

LoadingOverlay

로딩 오버레이. Spinner + 반투명 배경으로 콘텐츠 위에 로딩 상태를 표시합니다.

피드백인디케이터

SearchCombobox

match-sorter 기반 퍼지 검색 콤보박스.

필터

StatusSelect

색상 인디케이터가 있는 상태 선택 드롭다운.

피드백

DomainTable

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

데이터

QueryResultsTable

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

데이터
다음ProjectDashboard

기본 사용

사용자 목록

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

빈 상태

빈 테이블

등록된 사용자가 없습니다

기본 사용

콘텐츠 영역

이 영역 위에 로딩 오버레이가 표시됩니다.

기본 사용

패키지 검색

기본 사용

색상 커스터마이징

기본 사용

도메인 관리

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)