AcquisitionAnalysis
BlocksAnalyze acquisition across Overview, Channels, and Campaigns tabs with metrics, trends, and tables.
Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.
bun add @reopt-ai/opt-uiimport { DataTable } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
| 이름 | 이메일 | 역할 | 상태 | 완료율 |
|---|---|---|---|---|
| 김철수 | 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 | 컬럼 너비를 최솟값/최댓값으로 이동 |
Analyze acquisition across Overview, Channels, and Campaigns tabs with metrics, trends, and tables.
Manage alerts with a DataTable and AlertBuilder.
Compose a billing overview from StatCard, BarChart, and DataTable.
Explore Trend, Distribution, Composition, and Data tabs with multiple charts and a DataTable.
Compare up to five cohorts across four tabs with comparison charts, retention heatmaps, and tables.
Explore filtered data with SearchCombobox, StatusSelect, and DataTable inside a group-spaced BlockLayout.
Debug E2E tests with a test-list sidebar and tabs for video, screenshots, network, console, and traces.
Define funnel steps and compare conversion, breakdowns, and trends with charts and tables.
Configure user-path analysis and explore grid or Sankey flows, top paths, drop-off, patterns, entry and exit points, and dwell time.
Summarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.
Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.
Manage segments with a DataTable and SegmentBuilder.
Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.
Explore user records with a DataTable and FilterBar.
Browse workflow runs with search and status filters, a DataTable, and tabbed detail dialogs.
Explore hierarchical rows with recursive rendering and expand and collapse controls.
Edit cells with a double click, confirm with Enter, and cancel with Escape.
Manage domain rows in a Composite grid with keyboard navigation.
Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.
Arrange draggable and resizable dashboard widgets with react-grid-layout.
Move cards between Kanban columns using HTML5 drag and drop.