111 lines
2.8 KiB
TypeScript
111 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
|
import { ComponentCategory } from "@/types/component";
|
|
import type { WebType } from "@/types/screen";
|
|
import { TableListWrapper } from "./TableListComponent";
|
|
import { TableListConfigPanel } from "./TableListConfigPanel";
|
|
import { TableListConfig } from "./types";
|
|
|
|
/**
|
|
* TableList 컴포넌트 정의
|
|
* 데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트
|
|
*/
|
|
export const TableListDefinition = createComponentDefinition({
|
|
id: "table-list",
|
|
name: "테이블 리스트",
|
|
nameEng: "TableList Component",
|
|
description: "데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트",
|
|
category: ComponentCategory.DISPLAY,
|
|
webType: "text",
|
|
component: TableListWrapper,
|
|
defaultConfig: {
|
|
// 표시 모드 설정
|
|
displayMode: "table" as const,
|
|
|
|
// 카드 모드 기본 설정
|
|
cardConfig: {
|
|
idColumn: "id",
|
|
titleColumn: "name",
|
|
cardsPerRow: 3,
|
|
cardSpacing: 16,
|
|
showActions: true,
|
|
},
|
|
|
|
// 테이블 기본 설정
|
|
showHeader: true,
|
|
showFooter: true,
|
|
height: "auto",
|
|
|
|
// 체크박스 설정
|
|
checkbox: {
|
|
enabled: true,
|
|
multiple: true,
|
|
position: "left",
|
|
selectAll: true,
|
|
},
|
|
|
|
// 컬럼 설정
|
|
columns: [],
|
|
autoWidth: true,
|
|
stickyHeader: false,
|
|
|
|
// 가로 스크롤 및 컬럼 고정 설정
|
|
horizontalScroll: {
|
|
enabled: true,
|
|
maxVisibleColumns: 8, // 8개 컬럼까지는 스크롤 없이 표시
|
|
minColumnWidth: 100,
|
|
maxColumnWidth: 300,
|
|
},
|
|
|
|
// 페이지네이션
|
|
pagination: {
|
|
enabled: true,
|
|
pageSize: 20,
|
|
showSizeSelector: true,
|
|
showPageInfo: true,
|
|
pageSizeOptions: [10, 20, 50, 100],
|
|
},
|
|
|
|
// 필터 설정
|
|
filter: {
|
|
enabled: true,
|
|
filters: [], // 사용자가 설정할 필터 목록
|
|
},
|
|
|
|
// 액션 설정
|
|
actions: {
|
|
showActions: false,
|
|
actions: [],
|
|
bulkActions: false,
|
|
bulkActionList: [],
|
|
},
|
|
|
|
// 스타일 설정
|
|
tableStyle: {
|
|
theme: "default",
|
|
headerStyle: "default",
|
|
rowHeight: "normal",
|
|
alternateRows: true,
|
|
hoverEffect: true,
|
|
borderStyle: "light",
|
|
},
|
|
|
|
// 데이터 로딩
|
|
autoLoad: true,
|
|
},
|
|
defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
|
|
configPanel: TableListConfigPanel,
|
|
icon: "Table",
|
|
tags: ["테이블", "데이터", "목록", "그리드"],
|
|
version: "1.0.0",
|
|
author: "개발팀",
|
|
documentation: "https://docs.example.com/components/table-list",
|
|
});
|
|
|
|
// 컴포넌트는 TableListRenderer에서 자동 등록됩니다
|
|
|
|
// 타입 내보내기
|
|
export type { TableListConfig } from "./types";
|