From 06cf51e5dd14e118fa8dbb8c666d78ace61cbf9b Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Tue, 28 Oct 2025 14:26:44 +0900
Subject: (김준회) fix: 공통컴포넌트: 데이터 그리드: 중첩헤더 있는 경우의 width
 계산 및 스타일 적용문제 해결
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/data-table/expandable-data-table.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'components/data-table/expandable-data-table.tsx')

diff --git a/components/data-table/expandable-data-table.tsx b/components/data-table/expandable-data-table.tsx
index 165ebd34..bc0833a6 100644
--- a/components/data-table/expandable-data-table.tsx
+++ b/components/data-table/expandable-data-table.tsx
@@ -510,8 +510,9 @@ export function ExpandableDataTable<TData>({
             className={cn(
               "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
               !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
-            )}>
-            {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
+            )}
+            style={{ minWidth: hasNestedHeader ? getTableWidth() : undefined }}>
+            {/* nested header가 있으면 table-fixed 제거하고 minWidth로 너비 강제, 없으면 table-fixed 적용 */}
             <TableHeader className="bg-background">
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
@@ -540,7 +541,11 @@ export function ExpandableDataTable<TData>({
                           ...getPinnedStyle(header.column, true),
                           // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
                           // 자식 헤더만 개별 width 설정
-                          ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
+                          ...(!('columns' in header.column.columnDef) && { 
+                            width: header.getSize(),
+                            minWidth: header.getSize(),
+                            maxWidth: header.column.columnDef.maxSize,
+                          }),
                         }}
                       >
                         <div style={{ position: "relative" }}>
@@ -655,7 +660,9 @@ export function ExpandableDataTable<TData>({
                               )}
                               style={{
                                 ...getPinnedStyle(cell.column, false),
-                                width: cell.column.getSize()
+                                width: cell.column.getSize(),
+                                minWidth: cell.column.getSize(),
+                                maxWidth: cell.column.columnDef.maxSize,
                               }}
                               // ✅ 클릭 이벤트 추가
                               onClick={isClickable ? (e) => handleCellClick(row.id, cell.column.id, e) : undefined}
-- 
cgit v1.2.3

