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

QueryHistoryList

Shell

Review query success, failure, time, row count, and duration, then restore SQL to the editor or rerun it.

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

Live preview

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

100%

What was asked, and whether it answered

Click an entry to load it.

Usage guidance

Best practices

  • Provide items with the most recent execution first. ranAt is an ISO timestamp and elapsed is in milliseconds. Preserve the SQL, status, and row count from that execution.
  • onLoad restores editor content; onRerun starts a separate execution request. Loading a query must not execute it automatically.
  • onClear clears the host's history store. Use loading during asynchronous history requests.

Usage to avoid

  • Rerun the historical SQL, not the editor's current content. The demo's rerun indicator only confirms that the callback was received.

Usage examples

Separate loading from rerunning a query

QueryHistoryList

PropTypeDefaultDescription
itemsRequiredQueryHistoryItem[]—최근 실행부터
loadingboolean—이력 조회 중
onLoad(item: QueryHistoryItem) => void—쿼리를 편집기로
onRerun(item: QueryHistoryItem) => void—그대로 다시 실행
onClear() => void—이력 비우기
headerReactNode—목록 위 내용
labelsQueryHistoryListLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (1)QueryHistoryListbutton
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

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.

opt-ui

QuickActions

Shells

Present frequent actions in a grid or list with keyboard shortcut labels.

PreviousQueryVariablesMenuNextSaveQueryDialog