reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
EventCatalog
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

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

© 2026 reopt Inc. All rights reserved.

EventCatalog

Block

Browse events with one Query controlling all filters and an inspector that keeps the list visible.

filter
Related docs
npx @reopt-ai/opt-cli block add event-catalog
Install and import
bash
npx @reopt-ai/opt-cli block add event-catalog
tsx
import { EventCatalog } from "@/components/surfaces/event-catalog";

Live preview

Change the width and theme, then interact with the components.

100%

Catalog

이벤트상태전환카테고리볼륨마지막 발생행 액션
ShoppingCart
결제 완료purchase

결제 승인 응답을 받은 시점

활성
checkout
12,480
2분 전
CreditCard
결제 시작checkout_started
신규
checkout
18,120
1분 전
UserPlus
구 가입legacy_signup

새 코드는 signup을 씁니다

지원 중단
auth
42
3일 전
CircleX
환불 요청refund_requested
미발생
checkout
0
-

Read failed

카탈로그를 불러오지 못했습니다

분석 백엔드에 연결하지 못했습니다.

Nothing collected yet

아직 수신된 이벤트가 없습니다

SDK를 설치하고 첫 이벤트를 보내면 여기에 나타납니다.

EventCatalog

PropTypeDefaultDescription
eventsRequiredEventCatalogItem[]—이미 필터가 적용된 이벤트 행
queryRequiredQuery—필터 상태 전부. URL에 실어 공유 가능
onQueryChangeRequired(query: Query) => void—Query 변경
filtersQueryFilterDef[]—필터 컨트롤 정의
statsStatCardType[]—상단 통계 카드
onStatClick(stat: StatCardType) => void—통계 카드 클릭 = 필터
selectedKeysstring[]—선택된 행
onSelectionChange(keys: string[]) => void—선택 변경
bulkActionsFloatingAction[]—일괄 작업
onBulkAction(actionId: string) => void—일괄 작업 실행
rowActionsEventCatalogRowAction[]—행 액션. 2개 노출 + 나머지는 오버플로 메뉴
onConversionChange(id: string, next: boolean) => void—전환 인라인 토글
inspectorReact.ReactNode—인스펙터 내용
inspectorTitleReact.ReactNode—인스펙터 제목
inspectorDescriptionReact.ReactNode—인스펙터 제목 아래 설명
inspectorActionsReact.ReactNode—인스펙터 헤더 컨트롤
inspectorFooterReact.ReactNode—인스펙터 하단 영역
inspectorWidth"sm" | "md" | "lg"—넓은 화면의 인스펙터 폭
selectedEventIdstring | nullnull인스펙터가 보여줄 이벤트
onSelectedEventChange(id: string | null) => void—인스펙터 대상 변경
pagenumber1현재 페이지
pageSizenumber50페이지 크기
totalCountnumber—필터 반영 총 개수. 페이지네이션 표시 여부를 결정
onPageChange(page: number) => void—페이지 변경
loadingbooleanfalse로딩
errorReact.ReactNode—읽기 실패. 빈 목록과 구분해 재시도를 제안
onRetry() => void—재시도
noticeReact.ReactNode—목록 위 고지 슬롯 (Callout)
emptyActionsReact.ReactNode—필터 없는 빈 상태에서 제안할 다음 행동
headerReact.ReactNode—헤더 슬롯
actionsReact.ReactNode—액션 슬롯
labelsEventCatalogLabels—상태 어휘 7종 + 컬럼 헤더 + 빈/에러 문구
classNamestring—추가 CSS 클래스

Related components

opt-ui

SegmentManager

Blocks

Manage segments with a DataTable and SegmentBuilder.

opt-ui

UserExplorer

Blocks

Explore user records with a DataTable and FilterBar.

opt-ui

SearchCombobox

Shells

Search options with match-sorter fuzzy matching in a combobox.

opt-ui

FilterBar

Shells

Filter a view with search, single-selection, and multiple-selection controls.

opt-ui

SegmentBuilder

Shells

Define event, property, cohort, or custom segments with accessible condition controls.

opt-ui

AsyncCombobox

Shells

Search asynchronously with built-in debouncing, loading feedback, and stale-response protection.

PreviousCohortComparisonNextCustomDashboard