SchemaTree

Shell

Search tables and typed columns, insert names at the cursor, and preview tables in a schema tree.

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { SchemaTree } from "@reopt-ai/opt-ui";

Live preview

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

100%

What can be queried

Search for utm_source, or hover a table for its actions.

Usage guidance

Best practices

The host fetches the schema. Supply only authorized tables and columns through tables, and use loading during the request.
onInsert passes a name but does not edit SQL. Connect it to SqlEditorHandle.insertText and apply identifier quoting appropriate to your database.
In onPreview, the host constructs and executes a limited SELECT. The tree itself does not connect to a database.

Usage to avoid

A searchable tree does not enforce authorization. The execution API must also check table access.

Usage examples

Search tables and insert names into the editor

SchemaTree

Prop	Type	Default	Description
tablesRequired	SchemaTreeTable[]	—	테이블과 컬럼
loading	boolean	—	스키마 조회 중
defaultExpanded	string[]	—	처음에 펼칠 테이블. 생략 시 첫 테이블
onInsert	(name: string, kind: "table" \| "column", table: string) => void	—	이름을 편집기 커서에 삽입
onPreview	(table: string) => void	—	테이블 미리보기 실행. SQL은 호출자가 작성
header	ReactNode	—	검색창 위 내용
labels	SchemaTreeLabels	—	문구 오버라이드

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

PageAside

Shells

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

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

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

SchemaTree

Shell

Search tables and typed columns, insert names at the cursor, and preview tables in a schema tree.

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { SchemaTree } from "@reopt-ai/opt-ui";

Live preview

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

100%

What can be queried

Search for utm_source, or hover a table for its actions.

Usage guidance

Best practices

The host fetches the schema. Supply only authorized tables and columns through tables, and use loading during the request.
onInsert passes a name but does not edit SQL. Connect it to SqlEditorHandle.insertText and apply identifier quoting appropriate to your database.
In onPreview, the host constructs and executes a limited SELECT. The tree itself does not connect to a database.

Usage to avoid

A searchable tree does not enforce authorization. The execution API must also check table access.

Usage examples

Search tables and insert names into the editor

SchemaTree

Prop	Type	Default	Description
tablesRequired	SchemaTreeTable[]	—	테이블과 컬럼
loading	boolean	—	스키마 조회 중
defaultExpanded	string[]	—	처음에 펼칠 테이블. 생략 시 첫 테이블
onInsert	(name: string, kind: "table" \| "column", table: string) => void	—	이름을 편집기 커서에 삽입
onPreview	(table: string) => void	—	테이블 미리보기 실행. SQL은 호출자가 작성
header	ReactNode	—	검색창 위 내용
labels	SchemaTreeLabels	—	문구 오버라이드

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

PageAside

Shells

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

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

BranchSelect

Shells

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