@rchemist/listgrid 0.2.6

package/dist/listgrid/components/list/ui/SearchBarActions.d.ts

@@ -0,0 +1,19 @@
+import { SearchForm } from '../../../form/SearchForm';
+import { ListableFormField } from '../../fields/abstract';
+import { ViewFieldManageable } from '../types/ViewListGrid.types';
+export interface SearchBarActionsProps extends ViewFieldManageable {
+    searchForm: SearchForm;
+    handlePageSizeChange: (value: string) => void;
+    hidePageSize?: boolean;
+    enableHandleData: boolean;
+    listFields: ListableFormField<any>[];
+    loading: boolean;
+    entityUrl: string;
+    subCollectionName?: string;
+    searchEnabled: boolean;
+    subCollection: boolean;
+    filtered: boolean;
+    onOpenAdvancedSearch?: () => void;
+    hideAdvancedSearch?: boolean;
+}
+export declare const SearchBarActions: React.FC<SearchBarActionsProps>;

package/dist/listgrid/components/list/ui/SearchBarActions.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { Indicator } from '../../../ui';
+import { Tooltip } from '../../../ui';
+import { SelectBox } from '../../../ui';
+import { getTranslation } from '../../../utils/i18n';
+import { ViewFieldSelector } from '../ViewFieldSelector';
+import { useListGridTheme } from '../context/ListGridThemeContext';
+/** 페이지 사이즈 옵션 정의 */
+const PAGE_SIZE_OPTIONS = [
+    { labelKey: 'common.pageSize.20', value: '20' },
+    { labelKey: 'common.pageSize.50', value: '50' },
+    { labelKey: 'common.pageSize.100', value: '100' },
+];
+const DEFAULT_PAGE_SIZE_VALUE = PAGE_SIZE_OPTIONS[0].value;
+export const SearchBarActions = (props) => {
+    const { hidePageSize, searchForm, handlePageSizeChange, enableHandleData, viewFields, setViewFields, listFields, loading, entityUrl, subCollectionName, searchEnabled, subCollection, filtered, onOpenAdvancedSearch, hideAdvancedSearch, } = props;
+    const { t } = getTranslation();
+    const { classNames: themeClasses, cn } = useListGridTheme();
+    const containerClass = cn('rcm-search-bar-actions', themeClasses.searchBarActions?.container);
+    // 서브콜렉션에서는 페이지 사이즈 선택만 숨김
+    const showPageSize = !hidePageSize && !subCollection;
+    // i18n 적용된 옵션 목록
+    const pageSizeOptions = useMemo(() => PAGE_SIZE_OPTIONS.map((opt) => ({
+        label: t(opt.labelKey),
+        value: opt.value,
+    })), [t]);
+    // 현재 페이지 사이즈 값
+    const currentPageSize = `${searchForm.getPageSize() ?? DEFAULT_PAGE_SIZE_VALUE}`;
+    // 현재 값이 옵션에 없으면 첫 번째 옵션으로 강제 변경
+    const isValidOption = PAGE_SIZE_OPTIONS.some((opt) => opt.value === currentPageSize);
+    useEffect(() => {
+        if (showPageSize && !isValidOption) {
+            handlePageSizeChange(DEFAULT_PAGE_SIZE_VALUE);
+        }
+    }, [showPageSize, isValidOption, handlePageSizeChange]);
+    return (_jsxs("div", { className: containerClass, children: [showPageSize && (_jsx("div", { className: "rcm-search-bar-pagesize", children: _jsx("div", { className: "rcm-search-bar-pagesize-select", children: _jsx(SelectBox, { required: true, name: `pageSizeSelector`, options: pageSizeOptions, value: isValidOption ? currentPageSize : DEFAULT_PAGE_SIZE_VALUE, onChange: handlePageSizeChange, menuPortalTarget: typeof document !== 'undefined' ? document.body : undefined }) }) })), enableHandleData && (_jsx("div", { className: subCollection ? '' : 'rcm-hide-below-sm', children: _jsx(ViewFieldSelector, { viewFields: viewFields, ...(setViewFields !== undefined ? { setViewFields } : {}), fields: listFields, disabled: loading, entityUrl: entityUrl, ...(subCollectionName !== undefined ? { subCollectionName } : {}) }) })), !hideAdvancedSearch && (_jsx(Tooltip, { label: `${searchEnabled ? '통합 검색' : '통합 검색을 지원하지 않습니다.'}`, children: filtered ? (_jsx(Indicator, { color: "red", processing: true, children: _jsx("button", { className: 'rcm-button rcm-search-bar-submit', "data-variant": "primary", disabled: loading || !searchEnabled, onClick: () => onOpenAdvancedSearch?.(), children: "\uD1B5\uD569 \uAC80\uC0C9" }) })) : (_jsx("button", { className: 'rcm-button rcm-search-bar-submit', "data-variant": "primary", disabled: loading || !searchEnabled, onClick: () => onOpenAdvancedSearch?.(), children: "\uD1B5\uD569 \uAC80\uC0C9" })) }))] }));
+};

package/dist/listgrid/components/list/ui/SortField.d.ts

@@ -0,0 +1,8 @@
+import { SearchForm } from '../../../form/SearchForm';
+interface SortFieldProps {
+    name: string;
+    searchForm: SearchForm;
+    onChangeSearchForm: (searchForm: SearchForm) => void;
+}
+export declare const SortField: ({ name, searchForm, onChangeSearchForm }: SortFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/listgrid/components/list/ui/SortField.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// import {SearchFormState} from '../state/State';
+import { IconSortAscendingLetters, IconSortDescending, IconSortDescendingLetters, } from '@tabler/icons-react';
+export const SortField = ({ name, searchForm, onChangeSearchForm }) => {
+    const sorts = searchForm.getSorts();
+    const sorted = sorts.has(name);
+    let direction = undefined;
+    if (sorted) {
+        // 이미 정렬 되어 있음
+        direction = sorts.get(name);
+    }
+    function changeSort() {
+        const nextDirection = getNextDirection();
+        const newSearchForm = searchForm.clone().withSort(name, nextDirection);
+        onChangeSearchForm(newSearchForm);
+    }
+    function getNextDirection() {
+        if (direction === undefined) {
+            return 'DESC';
+        }
+        else if (direction === 'DESC') {
+            return 'ASC';
+        }
+        else {
+            return undefined;
+        }
+    }
+    const icon = () => {
+        if (direction === undefined) {
+            return _jsx(IconSortDescending, { className: `w-3.5` });
+        }
+        else if (direction === 'ASC') {
+            return _jsx(IconSortDescendingLetters, { className: `w-3.5 text-primary` });
+        }
+        else {
+            return _jsx(IconSortAscendingLetters, { className: `w-3.5 text-primary` });
+        }
+    };
+    return (_jsx("button", { onClick: () => {
+            changeSort();
+        }, children: icon() }));
+};

package/dist/listgrid/components/list/ui/SubCollectionInlineView.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+export interface SubCollectionInlineViewProps {
+    entityForm: EntityForm;
+    itemId: string;
+    isExpanded: boolean;
+    onCollapse: () => void;
+    readonly?: boolean;
+    onSave?: () => void;
+    onDelete?: () => void;
+    /** SubCollection mappedBy 필드 - ViewEntityForm에서 부모 참조 필드 자동 숨김 */
+    mappedBy?: string;
+}
+/**
+ * Inline view component for SubCollection expansion
+ *
+ * Renders ViewEntityForm in an elegant inline panel with:
+ * - Smooth expand/collapse animation
+ * - Refined panel styling with shadow and border
+ * - Custom header with collapse button
+ * - No "목록" button (replaced with close functionality)
+ */
+export declare const SubCollectionInlineView: React.MemoExoticComponent<({ entityForm, itemId, isExpanded, onCollapse, readonly, onSave, onDelete, mappedBy, }: SubCollectionInlineViewProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/listgrid/components/list/ui/SubCollectionInlineView.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+/**
+ * Inline view component for SubCollection expansion
+ *
+ * Renders ViewEntityForm in an elegant inline panel with:
+ * - Smooth expand/collapse animation
+ * - Refined panel styling with shadow and border
+ * - Custom header with collapse button
+ * - No "목록" button (replaced with close functionality)
+ */
+export const SubCollectionInlineView = memo(({ entityForm, itemId, isExpanded, onCollapse, readonly = false, onSave, onDelete, mappedBy, }) => {
+    // buttonLinks에서 onClickList를 onCollapse로 대체
+    const buttonLinks = {
+        onClickList: async () => {
+            onCollapse();
+        },
+        ...(onSave
+            ? {
+                onSave: {
+                    success: () => {
+                        onSave();
+                    },
+                },
+            }
+            : {}),
+        ...(onDelete
+            ? {
+                onDelete: {
+                    success: () => {
+                        onDelete();
+                        onCollapse();
+                    },
+                },
+            }
+            : {}),
+    };
+    return (_jsx("div", { "data-testid": "subcollection-inline-view", className: `
+          subcollection-inline-view
+          transition-all duration-300 ease-in-out
+          overflow-hidden
+          ${isExpanded ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'}
+        `, children: _jsxs("div", { className: "\n          ml-4\n          border-l-4 border-primary/30\n          bg-white/50 dark:bg-gray-900/50\n          rounded-r-lg\n          overflow-x-hidden\n          max-w-full\n        ", children: [_jsx("div", { className: "\n            bg-primary/20 text-primary dark:bg-primary/30 dark:text-primary-light\n            text-xs font-medium\n            px-3 py-1.5\n            border-b border-primary/10\n          ", children: "\uC0C1\uC138 \uC815\uBCF4" }), _jsx("div", { className: "pl-4 pt-2", children: _jsx(ViewEntityForm, { entityForm: entityForm, readonly: readonly, excludeButtons: ['list'], hideTitle: true, buttonLinks: buttonLinks, buttonPosition: "header", subCollection: true, inlineMode: true, ...(mappedBy !== undefined ? { hideMappedByFields: mappedBy } : {}) }) })] }) }));
+});
+SubCollectionInlineView.displayName = 'SubCollectionInlineView';

package/dist/listgrid/components/list/ui/SubCollectionModal.d.ts

@@ -0,0 +1,15 @@
+import { EntityForm } from '../../../config/EntityForm';
+import { CreateUpdateOptions } from '../types/ViewListGrid.types';
+export interface SubCollectionModalProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    renderKey: number;
+    entityForm: EntityForm;
+    createOrUpdate?: CreateUpdateOptions;
+    onNotifications: (notifications: string[]) => void;
+    onErrors: (errors: string[]) => void;
+    onRefresh: () => void;
+    /** MappedBy field name for auto-hiding parent reference fields */
+    mappedBy?: string;
+}
+export declare const SubCollectionModal: React.FC<SubCollectionModalProps>;

package/dist/listgrid/components/list/ui/SubCollectionModal.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '../../../ui';
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+export const SubCollectionModal = ({ open, setOpen, renderKey, entityForm, createOrUpdate, onNotifications, onErrors, onRefresh, mappedBy, }) => {
+    if (!open)
+        return null;
+    return (_jsx(Modal, { view: { title: false }, size: 'full', animation: 'none', closeOnClickOutside: false, closeOnEscape: false, opened: open, onClose: () => setOpen(false), children: _jsx(ViewEntityForm, { entityForm: entityForm, subCollection: true, ...(mappedBy !== undefined ? { hideMappedByFields: mappedBy } : {}), postSave: async (savedEntityForm) => {
+                if (createOrUpdate?.onSave) {
+                    await createOrUpdate.onSave(savedEntityForm);
+                }
+                setOpen(false);
+                return savedEntityForm;
+            }, buttonLinks: {
+                onClickList: async () => setOpen(false),
+                onDelete: {
+                    success: () => {
+                        setOpen(false);
+                        onNotifications(['삭제가 완료되었습니다.']);
+                        onRefresh();
+                    },
+                    failed: (result) => {
+                        onErrors(result.errors ?? []);
+                        setOpen(false);
+                    },
+                },
+                onSave: {
+                    success: () => {
+                        setOpen(false);
+                        onNotifications(['저장이 완료되었습니다.']);
+                        onRefresh();
+                    },
+                },
+            } }) }, renderKey));
+};

package/dist/listgrid/components/list/ui/SubCollectionViewModal.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { ViewListGridProps } from '../types/ViewListGrid.types';
+import { SearchForm } from '../../../form/SearchForm';
+export declare const SubCollectionViewModal: ({ entityForm, managedId, props, setManagedId, fetchData, setOpenBaseLoading, mappedBy, }: {
+    entityForm: EntityForm;
+    managedId: string | undefined;
+    props: ViewListGridProps;
+    setManagedId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    fetchData: (form?: SearchForm) => void;
+    setOpenBaseLoading: (open: boolean) => void;
+    mappedBy?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/listgrid/components/list/ui/SubCollectionViewModal.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '../../../ui';
+import { isTrue } from '../../../utils/BooleanUtil';
+import React from 'react';
+import { ViewEntityForm } from '../../form/ViewEntityForm';
+export const SubCollectionViewModal = ({ entityForm, managedId, props, setManagedId, fetchData, setOpenBaseLoading, mappedBy, }) => {
+    if (!managedId)
+        return null;
+    const collectionEntityForm = entityForm.withId(managedId);
+    const excludeButtons = [];
+    const readonly = isTrue(props.options?.readonly) || !isTrue(props.options?.subCollection?.modifyOnView, true);
+    if (!isTrue(props.options?.subCollection?.delete, true)) {
+        excludeButtons.push('delete');
+    }
+    return (_jsx(React.Fragment, { children: _jsx(Modal, { opened: true, view: { title: false }, size: "5xl", animation: 'none', position: "center", closeOnClickOutside: false, closeOnEscape: false, onClose: () => {
+                setManagedId(undefined);
+            }, children: _jsx(ViewEntityForm, { entityForm: collectionEntityForm, subCollection: true, readonly: readonly, excludeButtons: excludeButtons, ...(mappedBy !== undefined ? { hideMappedByFields: mappedBy } : {}), buttonLinks: {
+                    onClickList: async () => {
+                        setManagedId(undefined);
+                    },
+                }, postSave: () => {
+                    // 저장이 완료된 경우에는 리프레시 한다.
+                    return new Promise(() => {
+                        setManagedId(undefined);
+                        fetchData();
+                        setOpenBaseLoading(false);
+                    });
+                }, postDelete: async () => {
+                    setManagedId(undefined);
+                    fetchData();
+                    setOpenBaseLoading(false);
+                } }, managedId) }) }));
+};

package/dist/listgrid/components/list/ui/SyncTopScrollbar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SyncTopScrollbarProps {
+    /** Target element ref to sync scroll with */
+    targetRef: React.RefObject<HTMLDivElement | null>;
+    /** Minimum content width to show scrollbar (default: 0, always show if scrollable) */
+    minWidthToShow?: number;
+    /** Additional className for the scrollbar container */
+    className?: string;
+}
+/**
+ * Synchronized top scrollbar component
+ *
+ * Creates a scrollbar at the top of the table that syncs with the bottom scrollbar.
+ * This improves UX for long lists where users would otherwise need to scroll
+ * down to access the horizontal scrollbar.
+ */
+export declare const SyncTopScrollbar: React.FC<SyncTopScrollbarProps>;
+export {};

package/dist/listgrid/components/list/ui/SyncTopScrollbar.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Synchronized top scrollbar component
+ *
+ * Creates a scrollbar at the top of the table that syncs with the bottom scrollbar.
+ * This improves UX for long lists where users would otherwise need to scroll
+ * down to access the horizontal scrollbar.
+ */
+export const SyncTopScrollbar = ({ targetRef, minWidthToShow = 0, className = '', }) => {
+    const topScrollRef = useRef(null);
+    const [contentWidth, setContentWidth] = useState(0);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [isVisible, setIsVisible] = useState(false);
+    const isSyncing = useRef(false);
+    // Update dimensions and visibility
+    const updateDimensions = useCallback(() => {
+        if (!targetRef.current)
+            return;
+        const scrollWidth = targetRef.current.scrollWidth;
+        const clientWidth = targetRef.current.clientWidth;
+        setContentWidth(scrollWidth);
+        setContainerWidth(clientWidth);
+        // Show only if content is wider than container and meets minimum width
+        const shouldShow = scrollWidth > clientWidth && scrollWidth >= minWidthToShow;
+        setIsVisible(shouldShow);
+    }, [targetRef, minWidthToShow]);
+    // Observe target element for size changes
+    useEffect(() => {
+        if (!targetRef.current)
+            return;
+        const target = targetRef.current;
+        // Initial measurement
+        updateDimensions();
+        // Use ResizeObserver to detect size changes
+        const resizeObserver = new ResizeObserver(() => {
+            updateDimensions();
+        });
+        resizeObserver.observe(target);
+        // Also observe the table inside for content changes
+        const table = target.querySelector('table');
+        if (table) {
+            resizeObserver.observe(table);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [targetRef, updateDimensions]);
+    // Sync scroll from top to target
+    const handleTopScroll = useCallback(() => {
+        if (isSyncing.current || !targetRef.current || !topScrollRef.current)
+            return;
+        isSyncing.current = true;
+        targetRef.current.scrollLeft = topScrollRef.current.scrollLeft;
+        // Reset sync flag after a short delay
+        requestAnimationFrame(() => {
+            isSyncing.current = false;
+        });
+    }, [targetRef]);
+    // Sync scroll from target to top
+    useEffect(() => {
+        if (!targetRef.current)
+            return;
+        const target = targetRef.current;
+        const handleTargetScroll = () => {
+            if (isSyncing.current || !topScrollRef.current)
+                return;
+            isSyncing.current = true;
+            topScrollRef.current.scrollLeft = target.scrollLeft;
+            requestAnimationFrame(() => {
+                isSyncing.current = false;
+            });
+        };
+        target.addEventListener('scroll', handleTargetScroll);
+        return () => {
+            target.removeEventListener('scroll', handleTargetScroll);
+        };
+    }, [targetRef]);
+    // Don't render if not visible
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx("div", { ref: topScrollRef, onScroll: handleTopScroll, className: `overflow-x-auto overflow-y-hidden ${className}`, style: {
+            height: '12px',
+            marginBottom: '4px',
+        }, children: _jsx("div", { style: {
+                width: contentWidth,
+                height: '1px',
+            } }) }));
+};

package/dist/listgrid/components/list/ui/TableSubCollectionView.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import { EntityForm } from '../../../config/EntityForm';
+import { CardSubCollectionFetchOptions, CardSubCollectionRelation } from '../../../config/CardSubCollectionField';
+import { TableConfig } from '../../../config/TableSubCollectionField';
+import { Session } from '../../../auth/types';
+import { SearchForm } from '../../../form/SearchForm';
+export interface TableSubCollectionViewProps {
+    parentEntityForm: EntityForm;
+    parentId: string;
+    entityForm: EntityForm;
+    fetchUrl: string | ((parentForm: EntityForm) => string);
+    tableConfig?: TableConfig;
+    relation: CardSubCollectionRelation;
+    readonly?: boolean;
+    session?: Session;
+    fetchOptions?: CardSubCollectionFetchOptions;
+    initialSearchForm?: SearchForm;
+    tooltip?: ReactNode;
+}
+/**
+ * TableSubCollectionView
+ * Displays a collection of items in a table format
+ */
+export declare const TableSubCollectionView: React.FC<TableSubCollectionViewProps>;
+export default TableSubCollectionView;

package/dist/listgrid/components/list/ui/TableSubCollectionView.js

@@ -0,0 +1,213 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCardSubCollectionData } from '../hooks/useCardSubCollectionData';
+import { Tooltip } from '../../../ui';
+import { ListableFormField } from '../../fields/abstract';
+import { IconAlertCircle, IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight, IconHelp, IconRefresh, IconSearch, IconTable, IconX, } from '@tabler/icons-react';
+/**
+ * TableSubCollectionView
+ * Displays a collection of items in a table format
+ */
+export const TableSubCollectionView = ({ parentEntityForm, parentId, entityForm, fetchUrl: fetchUrlProp, tableConfig, relation, readonly = false, session, fetchOptions, initialSearchForm, tooltip, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    // Check if a field name matches mappedBy patterns
+    const isMappedByField = useCallback((fieldName, mappedBy) => {
+        if (fieldName === mappedBy)
+            return true;
+        let baseField = mappedBy;
+        if (mappedBy.endsWith('Id')) {
+            baseField = mappedBy.slice(0, -2);
+        }
+        else if (mappedBy.endsWith('.id')) {
+            baseField = mappedBy.slice(0, -3);
+        }
+        if (fieldName === baseField)
+            return true;
+        if (fieldName.startsWith(baseField + '.'))
+            return true;
+        return false;
+    }, []);
+    // Build column definitions from entityForm fields
+    const columns = useMemo(() => {
+        const fields = Array.from(entityForm.fields.values());
+        const mappedBy = relation.mappedBy;
+        const displayFields = tableConfig?.displayFields;
+        const excludeFields = tableConfig?.excludeFields;
+        let selectedFields;
+        if (displayFields && displayFields.length > 0) {
+            // Use explicit displayFields order
+            selectedFields = displayFields
+                .map((name) => fields.find((f) => f.getName() === name))
+                .filter(Boolean);
+        }
+        else {
+            // Use list-enabled fields
+            selectedFields = fields.filter((field) => {
+                if (!(field instanceof ListableFormField))
+                    return false;
+                if (field.listConfig?.support !== true)
+                    return false;
+                if (isMappedByField(field.getName(), mappedBy))
+                    return false;
+                if (excludeFields?.includes(field.getName()))
+                    return false;
+                return true;
+            });
+        }
+        return selectedFields.map((field) => {
+            const label = field.getLabel();
+            return {
+                name: field.getName(),
+                label: typeof label === 'string' ? label : field.getName(),
+                options: field.options,
+            };
+        });
+    }, [entityForm, relation.mappedBy, tableConfig, isMappedByField]);
+    // quickSearch fields for search functionality
+    const quickSearchFields = useMemo(() => {
+        const fields = Array.from(entityForm.fields.values());
+        const mappedBy = relation.mappedBy;
+        return fields.filter((field) => {
+            if (field.listConfig?.support !== true)
+                return false;
+            if (field.listConfig?.quickSearch !== true)
+                return false;
+            if (isMappedByField(field.getName(), mappedBy))
+                return false;
+            return true;
+        });
+    }, [entityForm, relation.mappedBy, isMappedByField]);
+    const searchPlaceholder = useMemo(() => {
+        if (quickSearchFields.length === 0)
+            return '검색';
+        const labels = quickSearchFields.slice(0, 3).map((field) => {
+            const label = field.getLabel();
+            return typeof label === 'string' ? label : field.getName();
+        });
+        return `${labels.join(', ')} 검색`;
+    }, [quickSearchFields]);
+    const isQuickSearchEnabled = quickSearchFields.length > 0;
+    const fetchUrl = useMemo(() => {
+        if (typeof fetchUrlProp === 'function') {
+            return fetchUrlProp(parentEntityForm);
+        }
+        return fetchUrlProp;
+    }, [fetchUrlProp, parentEntityForm]);
+    const { data, loading, error, refresh } = useCardSubCollectionData(fetchUrl, {
+        mappedBy: relation.mappedBy,
+        ...(relation.filterBy !== undefined ? { filterBy: relation.filterBy } : {}),
+        ...(fetchOptions?.useSearchForm !== undefined
+            ? { useSearchForm: fetchOptions.useSearchForm }
+            : {}),
+        ...(initialSearchForm !== undefined ? { searchForm: initialSearchForm } : {}),
+    });
+    // Get nested field value from item
+    const getFieldValue = useCallback((item, fieldName) => {
+        if (!fieldName.includes('.')) {
+            return item[fieldName];
+        }
+        const keys = fieldName.split('.');
+        let value = item;
+        for (const key of keys) {
+            if (value === null || value === undefined)
+                return undefined;
+            value = value[key];
+        }
+        return value;
+    }, []);
+    // Resolve display value for a cell
+    const getCellDisplay = useCallback((item, col) => {
+        const value = getFieldValue(item, col.name);
+        if (value === null || value === undefined)
+            return '';
+        // Resolve select options
+        if (col.options && Array.isArray(col.options)) {
+            const rawValue = typeof value === 'object' ? value?.value : value;
+            const option = col.options.find((opt) => opt.value === rawValue);
+            if (option)
+                return option.label;
+        }
+        // Boolean
+        if (typeof value === 'boolean') {
+            return value ? 'Y' : 'N';
+        }
+        // Object with name/title (ManyToOne)
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            return value.name || value.title || value.label || JSON.stringify(value);
+        }
+        return String(value);
+    }, [getFieldValue]);
+    // Search filtering
+    const searchValue = useCallback((value, query) => {
+        if (value === null || value === undefined)
+            return false;
+        if (typeof value === 'string')
+            return value.toLowerCase().includes(query);
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            for (const prop of ['name', 'title', 'label']) {
+                if (value[prop] &&
+                    typeof value[prop] === 'string' &&
+                    value[prop].toLowerCase().includes(query)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }, []);
+    const filteredData = useMemo(() => {
+        if (!isQuickSearchEnabled || !searchQuery.trim())
+            return data;
+        const query = searchQuery.toLowerCase().trim();
+        return data.filter((item) => quickSearchFields.some((field) => searchValue(getFieldValue(item, field.getName()), query)));
+    }, [data, searchQuery, quickSearchFields, isQuickSearchEnabled, getFieldValue, searchValue]);
+    // Pagination
+    const pageSize = tableConfig?.pageSize;
+    const isPaginationEnabled = pageSize && pageSize > 0;
+    const totalPages = useMemo(() => {
+        if (!isPaginationEnabled)
+            return 1;
+        return Math.ceil(filteredData.length / pageSize);
+    }, [filteredData.length, pageSize, isPaginationEnabled]);
+    useEffect(() => {
+        if (currentPage > totalPages && totalPages > 0)
+            setCurrentPage(totalPages);
+        else if (currentPage < 1 && totalPages > 0)
+            setCurrentPage(1);
+    }, [currentPage, totalPages]);
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchQuery]);
+    const paginatedData = useMemo(() => {
+        if (!isPaginationEnabled)
+            return filteredData;
+        const start = (currentPage - 1) * pageSize;
+        return filteredData.slice(start, start + pageSize);
+    }, [filteredData, currentPage, pageSize, isPaginationEnabled]);
+    const goToPage = useCallback((page) => {
+        setCurrentPage(Math.max(1, Math.min(page, totalPages)));
+    }, [totalPages]);
+    const clearSearch = useCallback(() => {
+        setSearchQuery('');
+    }, []);
+    const showRowNumbers = tableConfig?.showRowNumbers !== false;
+    // Loading state
+    if (loading) {
+        return (_jsxs("div", { className: "rcm-subcollection-skeleton", children: [_jsxs("div", { className: "rcm-subcollection-skeleton-toolbar", children: [_jsx("div", { className: "rcm-subcollection-skeleton-search" }), _jsx("div", { className: "rcm-subcollection-skeleton-actions", children: _jsx("div", { className: "rcm-subcollection-skeleton-pill" }) })] }), _jsxs("div", { className: "rcm-subcollection-skeleton-table", children: [_jsx("div", { className: "rcm-subcollection-skeleton-thead" }), [1, 2, 3, 4, 5].map((i) => (_jsx("div", { className: "rcm-subcollection-skeleton-tr" }, i)))] })] }));
+    }
+    // Error state
+    if (error) {
+        return (_jsxs("div", { className: "rcm-subcollection-error", children: [_jsx("div", { className: "rcm-subcollection-error-icon", children: _jsx(IconAlertCircle, { size: 24 }) }), _jsxs("div", { className: "rcm-subcollection-error-body", children: [_jsx("h4", { className: "rcm-subcollection-error-title", children: "\uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }), _jsx("p", { className: "rcm-subcollection-error-message", children: error.message }), _jsxs("button", { type: "button", onClick: () => refresh(), className: "rcm-subcollection-error-retry", children: [_jsx(IconRefresh, { size: 16 }), "\uB2E4\uC2DC \uC2DC\uB3C4"] })] })] }));
+    }
+    return (_jsxs("div", { className: "rcm-subcollection", children: [_jsxs("div", { className: "rcm-subcollection-toolbar", children: [isQuickSearchEnabled && (_jsxs("div", { className: "rcm-subcollection-search", children: [_jsx("span", { className: isSearchFocused
+                                    ? 'rcm-subcollection-search-icon rcm-subcollection-search-icon-focused'
+                                    : 'rcm-subcollection-search-icon', children: _jsx(IconSearch, { size: 18, stroke: 2 }) }), _jsx("input", { type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onFocus: () => setIsSearchFocused(true), onBlur: () => setIsSearchFocused(false), placeholder: searchPlaceholder, className: "rcm-subcollection-search-input" }), searchQuery && (_jsx("button", { type: "button", onClick: clearSearch, className: "rcm-subcollection-search-clear", "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: _jsx(IconX, { size: 16 }) }))] })), _jsxs("div", { className: "rcm-subcollection-actions", children: [_jsx("div", { className: "rcm-subcollection-count", children: searchQuery ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "rcm-subcollection-count-accent", children: filteredData.length }), _jsx("span", { className: "rcm-subcollection-count-sep", children: "/" }), _jsx("span", { children: data.length })] })) : (_jsxs("span", { children: [data.length, "\uAC1C"] })) }), _jsx("button", { type: "button", onClick: () => refresh(), className: "rcm-subcollection-icon-btn", title: "\uC0C8\uB85C\uACE0\uCE68", children: _jsx(IconRefresh, { size: 16, stroke: 2 }) }), tooltip && (_jsx(Tooltip, { label: tooltip, color: "gray", withArrow: true, position: "top-end", children: _jsx("div", { className: "rcm-subcollection-icon-btn rcm-subcollection-icon-btn-help", children: _jsx(IconHelp, { size: 16, stroke: 2 }) }) }))] })] }), filteredData.length === 0 ? (_jsx("div", { className: "rcm-subcollection-empty", children: searchQuery ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "rcm-subcollection-empty-icon", children: _jsx(IconSearch, { size: 32 }) }), _jsxs("p", { className: "rcm-subcollection-empty-title", children: ["'", searchQuery, "'\uC5D0 \uB300\uD55C \uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4"] }), _jsx("button", { type: "button", onClick: clearSearch, className: "rcm-subcollection-empty-action", children: "\uAC80\uC0C9 \uCD08\uAE30\uD654" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rcm-subcollection-empty-icon", children: _jsx(IconTable, { size: 32 }) }), _jsx("p", { className: "rcm-subcollection-empty-title", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" })] })) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "rcm-subcollection-table-wrapper", children: _jsxs("table", { className: "rcm-subcollection-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [showRowNumbers && _jsx("th", { className: "rcm-subcollection-th-no", children: "No" }), columns.map((col) => (_jsx("th", { children: col.label }, col.name)))] }) }), _jsx("tbody", { children: paginatedData.map((item, index) => {
+                                        const rowNumber = isPaginationEnabled
+                                            ? (currentPage - 1) * pageSize + index + 1
+                                            : index + 1;
+                                        return (_jsxs("tr", { children: [showRowNumbers && _jsx("td", { className: "rcm-subcollection-td-no", children: rowNumber }), columns.map((col) => (_jsx("td", { children: getCellDisplay(item, col) }, col.name)))] }, item.id || index));
+                                    }) })] }) }), isPaginationEnabled && totalPages > 1 && (_jsxs("div", { className: "rcm-subcollection-pagination", children: [_jsx("button", { type: "button", onClick: () => goToPage(1), disabled: currentPage === 1, className: "rcm-subcollection-page-btn", title: "\uCCAB \uD398\uC774\uC9C0", children: _jsx(IconChevronsLeft, { size: 16, stroke: 2 }) }), _jsx("button", { type: "button", onClick: () => goToPage(currentPage - 1), disabled: currentPage === 1, className: "rcm-subcollection-page-btn", title: "\uC774\uC804 \uD398\uC774\uC9C0", children: _jsx(IconChevronLeft, { size: 16, stroke: 2 }) }), _jsxs("div", { className: "rcm-subcollection-page-info", children: [_jsx("span", { className: "rcm-subcollection-page-info-current", children: currentPage }), _jsx("span", { className: "rcm-subcollection-count-sep", children: "/" }), _jsx("span", { children: totalPages })] }), _jsx("button", { type: "button", onClick: () => goToPage(currentPage + 1), disabled: currentPage === totalPages, className: "rcm-subcollection-page-btn", title: "\uB2E4\uC74C \uD398\uC774\uC9C0", children: _jsx(IconChevronRight, { size: 16, stroke: 2 }) }), _jsx("button", { type: "button", onClick: () => goToPage(totalPages), disabled: currentPage === totalPages, className: "rcm-subcollection-page-btn", title: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0", children: _jsx(IconChevronsRight, { size: 16, stroke: 2 }) }), _jsxs("div", { className: "rcm-subcollection-page-size-badge", children: [pageSize, "\uAC1C\uC529"] })] }))] }))] }));
+};
+export default TableSubCollectionView;

package/dist/listgrid/components/list/ui/ViewColumn.d.ts

@@ -0,0 +1,2 @@
+import { RowItemProps } from '../types/RowItem.types';
+export declare const ViewColumn: ({ fields, item, index, router, path, entityForm, viewFields, viewMode, onSelect, clickAccordion, }: RowItemProps) => import("react/jsx-runtime").JSX.Element | null;