reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui179opt-charts37opt-datagrid7opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/opt-datagrid/Grid Toolbar
Editopt-datagrid 예제

Grid Toolbar

컬럼 표시 여부, 행 밀도, 전체 화면을 DataGridToolbar 하나로 연결합니다. 식별 컬럼은 잠가 숨김을 막고, 같은 상태가 실제 DataGrid 렌더링에 즉시 반영되는 운영 그리드 예제입니다.

editgridtoolbarcolumns
bun add @reopt-ai/opt-datagrid
DataGridDataGridColumnDataGridToolbaruseDataGridToolbar
1024px

Reader controls

Incident services

5 of 5 columns
checkout-api
Commerce
Incident
842
billing-worker
Finance
Watching
286
catalog-search
Discovery
Healthy
94
event-stream
Platform
Healthy
71
email-delivery
Lifecycle
Watching
331

Service stays visible so every row keeps its identity.

관련 예제

opt-datagrid

Editable Grid

opt-datagrid - Starter

Examples
DataGridDataGridColumn+1
opt-datagrid

Journal Ledger

opt-datagrid - Edit

Examples
DataGridDataGridColumn+4
opt-datagrid

Campaign Base App

opt-datagrid - App

Examples
DataGridDataGridColumn+2
이전Editable Grid다음Journal Ledger