kjs
c98b2ccb43
- Implemented a new progress bar rendering function in the SplitPanelLayoutComponent to visually represent the ratio of child to parent values. - Enhanced the SortableColumnRow component to support progress column configuration, allowing users to set current and maximum values through a popover interface. - Updated the AdditionalTabConfigPanel to include options for adding progress columns, improving user experience in managing data visualization. These changes significantly enhance the functionality and usability of the split panel layout by providing visual progress indicators and configuration options for users. |
||
|---|---|---|
| .. | ||
| config-panels | ||
| README.md | ||
| SplitPanelContext.tsx | ||
| SplitPanelLayoutComponent.tsx | ||
| SplitPanelLayoutConfigPanel.tsx | ||
| SplitPanelLayoutRenderer.tsx | ||
| config.ts | ||
| index.ts | ||
| types.ts | ||
README.md
SplitPanelLayout 컴포넌트
마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트입니다.
특징
- 🔄 마스터-디테일 패턴: 좌측에서 항목 선택 시 우측에 상세 정보 표시
- 📏 크기 조절 가능: 드래그하여 좌우 패널 크기 조정
- 🔍 검색 기능: 각 패널에 독립적인 검색 기능
- 🔗 관계 설정: JOIN, DETAIL, CUSTOM 관계 타입 지원
- ⚙️ 유연한 설정: 다양한 옵션으로 커스터마이징 가능
사용 사례
1. 코드 관리
- 좌측: 코드 카테고리 목록
- 우측: 선택된 카테고리의 코드 목록
2. 테이블 조인 설정
- 좌측: 기본 테이블 목록
- 우측: 선택된 테이블의 조인 조건 설정
3. 메뉴 관리
- 좌측: 메뉴 트리 구조
- 우측: 선택된 메뉴의 상세 설정
설정 옵션
좌측 패널 (leftPanel)
title: 패널 제목tableName: 데이터베이스 테이블명showSearch: 검색 기능 표시 여부showAdd: 추가 버튼 표시 여부
우측 패널 (rightPanel)
title: 패널 제목tableName: 데이터베이스 테이블명showSearch: 검색 기능 표시 여부showAdd: 추가 버튼 표시 여부relation: 좌측 항목과의 관계 설정type: "join" | "detail" | "custom"foreignKey: 외래키 컬럼명
레이아웃 설정
splitRatio: 좌측 패널 너비 비율 (0-100, 기본 30)resizable: 크기 조절 가능 여부 (기본 true)minLeftWidth: 좌측 최소 너비 (기본 200px)minRightWidth: 우측 최소 너비 (기본 300px)autoLoad: 자동 데이터 로드 (기본 true)
예시
const config: SplitPanelLayoutConfig = {
leftPanel: {
title: "코드 카테고리",
tableName: "code_category",
showSearch: true,
showAdd: true,
},
rightPanel: {
title: "코드 목록",
tableName: "code_info",
showSearch: true,
showAdd: true,
relation: {
type: "detail",
foreignKey: "category_id",
},
},
splitRatio: 30,
resizable: true,
};