AcquisitionAnalysis
Blocks획득 분석 Surface. 3탭(Overview, Channels, Campaigns) + StatCard + LineChart + DataTable 조합.
제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다.
bun add @reopt-ai/opt-uiimport { DataTable } from "@reopt-ai/opt-ui";화면 너비와 테마를 바꾸고 컴포넌트를 직접 조작해 보세요.
| 이름 | 이메일 | 역할 | 상태 | 완료율 |
|---|---|---|---|---|
| 김철수 | kim@example.com | Admin | 활성 | 0.82 |
| 이영희 | lee@example.com | Editor | 활성 | 1.2 |
| 박민수 | park@example.com | Viewer | 비활성 | — |
| 최지은 | choi@example.com | Editor | 활성 | -0.15 |
| 정우성 | jung@example.com | Viewer | 활성 | 0.46 |
헤더를 눌러 정렬하고, 컬럼 경계에 포커스한 뒤 ←/→(Shift는 40px)로 너비를 바꿀 수 있습니다. 완료율은 범위를 벗어나거나 NaN이어도 0–100% 사이로 안전하게 표시됩니다.
| 키 | 동작 |
|---|---|
| ↑ ↓ | 행 탐색 |
| ← → | 셀 탐색 |
| Enter / Space | 정렬 가능한 헤더 또는 행 활성화 |
| 리사이즈 핸들: ← → | 컬럼 너비를 10px 단위로 조절 |
| 리사이즈 핸들: Shift+← Shift+→ | 컬럼 너비를 40px 단위로 조절 |
| 리사이즈 핸들: Home / End | 컬럼 너비를 최솟값/최댓값으로 이동 |
획득 분석 Surface. 3탭(Overview, Channels, Campaigns) + StatCard + LineChart + DataTable 조합.
알림 관리 Surface. DataTable + AlertBuilder 조합.
빌링 페이지 Surface. StatCard + BarChart + DataTable 조합.
분석 Surface. 4탭(Trend, Distribution, Composition, Data) + 다중 차트 + DataTable 조합.
코호트 비교 Surface. ComparisonChart + RetentionHeatmap + DataTable + N-cohort 지원 (최대 5개). 4탭 조합.
필터링 가능한 데이터 탐색 영역. `spacing="group"` BlockLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.
E2E 테스트 디버깅 워크스페이스. 2-pane 레이아웃 — 사이드바 테스트 목록 + 탭 콘텐츠 뷰어 (Video/Screenshots/Network/Console/Trace).
퍼널 분석 Surface. StepBuilder + 3탭(Funnel, Breakdown, Trend) + FunnelChart + DataTable 조합.
경로 분석 Surface. 설정 사이드바(단계 소스·시작/종료점·단계 수·행 수·제외·반복 병합·URL 그룹핑·최소 세션·세그먼트) + PathFlowChart(grid/sankey) 흐름 탭 + Top Paths/Drop-off/Patterns/Entry-Exit/Dwell 탭 조합.
프로젝트 개요 Surface. SummaryRow + NavCards + LineChart + BarChart + DataTable + CodeSnippetViewer + Dashboard CRUD 조합.
프로젝트 설정 Surface. SettingsForm + DataTable + CodeSnippetViewer + Retention Policy + Cleanup Preview + Storage Usage 조합.
세그먼트 관리 Surface. DataTable + SegmentBuilder 조합.
사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.
사용자 탐색 Surface. DataTable + FilterBar 조합.
워크플로우 실행 이력 화면. 검색/상태 필터 + DataTable + 상세 Dialog 탭 뷰 조합.
계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.
인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.
도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.
쿼리 결과 테이블. 타입이 표시되는 헤더, 로컬 정렬, 컬럼 리사이즈, 행 상세 패널을 갖추고 행을 윈도잉해 만 행도 스크롤로 다룹니다. NULL·불리언·객체를 빈칸 대신 글자로 씁니다.
위젯 그리드. react-grid-layout 래퍼로 드래그/리사이즈 가능한 대시보드 위젯을 배치합니다.
칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.