reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
QueryOutputPane
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.

QueryOutputPane

Shell

Display query states and completed results as tables, charts, or split views with row count, duration, bytes read, and truncation status.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { QueryOutputPane } from "@reopt-ai/opt-ui";

Live preview

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

100%

Where the answer lands

#
2026-08-011200390
2026-08-021422393
2026-08-031597387
2026-08-041689373
2026-08-051684353
2026-08-061589331
2026-08-071436311
2026-08-081270294
2026-08-091137284
2026-08-101079283
2026-08-111116292
2026-08-121248310
2026-08-131448337
2026-08-141676371
14 row(s)
14 rows184 ms48,210 rows scanned3.0 MB read

Usage guidance

Best practices

  • The host manages idle → running → success/error/cancelled. Supply execution API error details through error, and connect onRetry and onCancel to real execution and cancellation.
  • Use columns and rows from the same execution for results and chart. Omitting chart hides chart switching.
  • stats.elapsed is measured in milliseconds and runningSeconds in seconds. Show stats.truncated when the server limits results.

Usage to avoid

  • Do not present results from running or failed requests as successful. The state buttons in the example only demonstrate display states.

Usage examples

Switch execution states and result views

QueryOutputPane

PropTypeDefaultDescription
viewRequiredQueryOutputView—표 / 차트 / 분할
onViewChangeRequired(view: QueryOutputView) => void—뷰 전환
resultsRequiredReactNode—결과 테이블
chartReactNode—차트 빌더. 없으면 차트 뷰를 숨김
statusRequired"idle" | "running" | "success" | "error" | "cancelled"—실행 수명주기
errorstring—백엔드 오류 원문
runningSecondsnumber—실행 경과 초. 로딩 상태에 표시
onCancel() => void—실행 취소
statsQueryRunStats—행 수, 경과, 읽은 바이트, 절단 여부
actionsReactNode—뷰 전환 오른쪽 컨트롤
statusExtraReactNode—상태바 추가 내용
bannerReactNode—출력 위 알림
onRetry() => void—오류 상태 닫기
labelsQueryOutputPaneLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (3)QueryOutputPanesegmented-controlempty-stateresizable
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

QueryOutputPane 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

SegmentedControl

Core

Show all options in a single-selection control with radio-group semantics and arrow-key navigation.

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

PreviousQueryToolbarNextQueryResultChart