PropertyCatalog

Block

Browse discovered properties by scope and type, with inferred types explicitly labeled.

npx @reopt-ai/opt-cli block add property-catalog

Install and import

bash

npx @reopt-ai/opt-cli block add property-catalog

tsx

import { PropertyCatalog } from "@/components/surfaces/property-catalog";

Live preview

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

100%

Property catalog

전체이벤트프로필

숨긴 속성 포함

속성	타입	스코프	관측 이벤트	마지막 발생
`plan` 결제 플랜	Enum	이벤트	6	2분 전
`amount`	Number(추론)	이벤트	2	2분 전
`signup_date` 가입 시각	Date and time	프로필	0	-

Nothing discovered yet

아직 관측된 속성이 없습니다

이벤트에 속성을 실어 보내면 여기에 자동으로 나타납니다.

PropertyCatalog

Prop	Type	Default	Description
propertiesRequired	PropertyCatalogItem[]	—	이미 필터가 적용된 속성 행
queryRequired	Query	—	필터 상태 전부
onQueryChangeRequired	(query: Query) => void	—	Query 변경
filters	QueryFilterDef[]	—	필터 컨트롤 정의
scope	PropertyCatalogScope \| "all"	"all"	스코프 세그먼트
onScopeChange	(scope: PropertyCatalogScope \| "all") => void	—	스코프 변경
includeHidden	boolean	false	숨긴 속성 포함
onIncludeHiddenChange	(next: boolean) => void	—	숨김 포함 토글
onHiddenChange	(id: string, next: boolean) => void	—	행별 숨김 토글
rowActions	PropertyCatalogRowAction[]	—	행 액션. 2개 노출 + 오버플로
inspector	React.ReactNode	—	인스펙터 내용
inspectorTitle	React.ReactNode	—	인스펙터 제목
inspectorDescription	React.ReactNode	—	인스펙터 제목 아래 설명
inspectorActions	React.ReactNode	—	인스펙터 헤더 컨트롤
inspectorFooter	React.ReactNode	—	인스펙터 하단 영역
inspectorWidth	"sm" \| "md" \| "lg"	—	넓은 화면의 인스펙터 폭
selectedPropertyId	string \| null	null	인스펙터가 보여줄 속성
onSelectedPropertyChange	(id: string \| null) => void	—	인스펙터 대상 변경
selectedKeys	string[]	—	선택된 행
onSelectionChange	(keys: string[]) => void	—	선택 변경
bulkActions	FloatingAction[]	—	일괄 작업
onBulkAction	(actionId: string) => void	—	일괄 작업 실행
stats	StatCardType[]	—	상단 통계 카드
onStatClick	(stat: StatCardType) => void	—	통계 카드 클릭 = 필터
page	number	1	현재 페이지
pageSize	number	50	페이지 크기
totalCount	number	—	필터 반영 총 개수
onPageChange	(page: number) => void	—	페이지 변경
loading	boolean	false	로딩
error	React.ReactNode	—	읽기 실패. 빈 목록과 구분
onRetry	() => void	—	재시도
notice	React.ReactNode	—	목록 위 고지 슬롯
emptyActions	React.ReactNode	—	필터 없는 빈 상태에서 제안할 다음 행동
header	React.ReactNode	—	헤더 슬롯
actions	React.ReactNode	—	액션 슬롯
labels	PropertyCatalogLabels	—	컬럼 헤더 + 스코프 + 빈/에러 문구
className	string	—	추가 CSS 클래스

Related components

ProjectSettings

Blocks

Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.

CustomDashboard

Blocks

Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.

DebugWorkspace

Blocks

Debug E2E tests with a test-list sidebar and tabs for video, screenshots, network, console, and traces.

VisualDiffManager

Blocks

Review screenshot regressions and approvals with a three-column snapshot list and image-diff viewer.

UserDetail

Blocks

Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.

ProjectOverview

Blocks

Summarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.

PropertyCatalog

Block

Browse discovered properties by scope and type, with inferred types explicitly labeled.

Related docs

npx @reopt-ai/opt-cli block add property-catalog

Install and import

bash

npx @reopt-ai/opt-cli block add property-catalog

tsx

import { PropertyCatalog } from "@/components/surfaces/property-catalog";

Live preview

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

100%

Property catalog

전체이벤트프로필

숨긴 속성 포함

속성	타입	스코프	관측 이벤트	마지막 발생
`plan` 결제 플랜	Enum	이벤트	6	2분 전
`amount`	Number(추론)	이벤트	2	2분 전
`signup_date` 가입 시각	Date and time	프로필	0	-

Nothing discovered yet

아직 관측된 속성이 없습니다

이벤트에 속성을 실어 보내면 여기에 자동으로 나타납니다.

PropertyCatalog

Prop	Type	Default	Description
propertiesRequired	PropertyCatalogItem[]	—	이미 필터가 적용된 속성 행
queryRequired	Query	—	필터 상태 전부
onQueryChangeRequired	(query: Query) => void	—	Query 변경
filters	QueryFilterDef[]	—	필터 컨트롤 정의
scope	PropertyCatalogScope \| "all"	"all"	스코프 세그먼트
onScopeChange	(scope: PropertyCatalogScope \| "all") => void	—	스코프 변경
includeHidden	boolean	false	숨긴 속성 포함
onIncludeHiddenChange	(next: boolean) => void	—	숨김 포함 토글
onHiddenChange	(id: string, next: boolean) => void	—	행별 숨김 토글
rowActions	PropertyCatalogRowAction[]	—	행 액션. 2개 노출 + 오버플로
inspector	React.ReactNode	—	인스펙터 내용
inspectorTitle	React.ReactNode	—	인스펙터 제목
inspectorDescription	React.ReactNode	—	인스펙터 제목 아래 설명
inspectorActions	React.ReactNode	—	인스펙터 헤더 컨트롤
inspectorFooter	React.ReactNode	—	인스펙터 하단 영역
inspectorWidth	"sm" \| "md" \| "lg"	—	넓은 화면의 인스펙터 폭
selectedPropertyId	string \| null	null	인스펙터가 보여줄 속성
onSelectedPropertyChange	(id: string \| null) => void	—	인스펙터 대상 변경
selectedKeys	string[]	—	선택된 행
onSelectionChange	(keys: string[]) => void	—	선택 변경
bulkActions	FloatingAction[]	—	일괄 작업
onBulkAction	(actionId: string) => void	—	일괄 작업 실행
stats	StatCardType[]	—	상단 통계 카드
onStatClick	(stat: StatCardType) => void	—	통계 카드 클릭 = 필터
page	number	1	현재 페이지
pageSize	number	50	페이지 크기
totalCount	number	—	필터 반영 총 개수
onPageChange	(page: number) => void	—	페이지 변경
loading	boolean	false	로딩
error	React.ReactNode	—	읽기 실패. 빈 목록과 구분
onRetry	() => void	—	재시도
notice	React.ReactNode	—	목록 위 고지 슬롯
emptyActions	React.ReactNode	—	필터 없는 빈 상태에서 제안할 다음 행동
header	React.ReactNode	—	헤더 슬롯
actions	React.ReactNode	—	액션 슬롯
labels	PropertyCatalogLabels	—	컬럼 헤더 + 스코프 + 빈/에러 문구
className	string	—	추가 CSS 클래스

Related components

ProjectSettings

Blocks

Manage project settings, retention policies, cleanup previews, and storage usage with forms, tables, and code snippets.

CustomDashboard

Blocks

Arrange custom dashboard widgets with WidgetGrid, ReportBuilder, ReportWidget, and FilterBar.

DebugWorkspace

Blocks

Debug E2E tests with a test-list sidebar and tabs for video, screenshots, network, console, and traces.

VisualDiffManager

Blocks

Review screenshot regressions and approvals with a three-column snapshot list and image-diff viewer.

UserDetail

Blocks

Build user profiles with avatars, metrics, gauges, progress indicators, tables, and filters.

ProjectOverview

Blocks

Summarize a project with metrics, navigation cards, charts, tables, code snippets, and dashboard management.