reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Shells/KanbanBoard

KanbanBoard

Shell

칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.

dataworkflow
Related docs
npx @reopt-ai/opt-cli surface add kanban-board
100%

To Do

2

Setup CI

Alice

Write tests

Bob

In Progress

1

Build UI

Charlie

Done

0

컴포넌트 의존 관계

깊이
▼ USES (1)KanbanBoardscroll-area

테스트 커버리지

2026년 7월 9일1/1 통과
1성공
0실패
1전체
  • 컬럼과 카드를 렌더링한다

Related components

DomainTable

도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.

Data

DataTable

제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다.

Data

QueryResultsTable

쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.

Data

WidgetGrid

위젯 그리드. react-grid-layout 래퍼로 드래그/리사이즈 가능한 대시보드 위젯을 배치합니다.

Data

TreeTable

계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.

Data

InlineEditTable

인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.

Data
PreviousInlineEditTableNextRichTextEditor

기본 사용

도메인 관리

DomainStatusSSLRedirectAdded
example.comActiveValid—2024-01-15
www.example.comActiveValidexample.com2024-01-15
api.example.comActiveValid—2024-02-01
staging.example.comPendingPending—2024-03-01
old.example.comErrorExpired—2023-06-01

기본 사용

사용자 목록

이름이메일역할상태완료율
김철수kim@example.comAdmin활성0.82
이영희lee@example.comEditor활성1.2
박민수park@example.comViewer비활성—
최지은choi@example.comEditor활성-0.15
정우성jung@example.comViewer활성0.46

헤더를 눌러 정렬하고, 컬럼 경계에 포커스한 뒤 ←/→(Shift는 40px)로 너비를 바꿀 수 있습니다. 완료율은 범위를 벗어나거나 NaN이어도 0–100% 사이로 안전하게 표시됩니다.

빈 상태

빈 테이블

등록된 사용자가 없습니다
#user_ideventtimestampproperties
1usr_001page_view2026-02-05 10:23:01{"path":"/home"}
2usr_002click2026-02-05 10:23:05{"button":"signup"}
3usr_001purchase2026-02-05 10:24:12{"amount":49}
4usr_003page_view2026-02-05 10:25:00{"path":"/pricing"}
4 row(s)

쿼리를 실행하고 있습니다...

warehouse connection timed out

조건에 맞는 결과가 없습니다

Widget A
Widget B
Widget C
NameSizeType
src
—
folder
index.ts
2.1 KB
file
utils
—
folder
package.json
1.2 KB
file
NameEmail
Alicealice@example.com
Bobbob@example.com