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/data-table.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

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

diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 44cbd47b..f6d3af73 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -78,6 +78,12 @@ export function DataTable<TData>({
     return children;
   }, [children]);
 
+  // 🎯 테이블 총 너비 계산 (nested header가 있을 때만 사용)
+  const getTableWidth = React.useCallback(() => {
+    const totalSize = table.getCenterTotalSize() + table.getLeftTotalSize() + table.getRightTotalSize()
+    return Math.max(totalSize, 800) // 최소 800px 보장
+  }, [table])
+
   return (
     <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
       {stableChildren}
@@ -86,8 +92,9 @@ export function DataTable<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>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -116,7 +123,9 @@ export function DataTable<TData>({
                         // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
                         // 자식 헤더만 개별 width 설정
                         ...(!('columns' in header.column.columnDef) && {
-                          width: header.getSize()
+                          width: header.getSize(),
+                          minWidth: header.getSize(),
+                          maxWidth: header.column.columnDef.maxSize,
                         }),
                       }}
                     >
@@ -214,6 +223,8 @@ export function DataTable<TData>({
                           style={{
                             ...getCommonPinningStylesWithBorder({ column: cell.column }),
                             width: cell.column.getSize(),
+                            minWidth: cell.column.getSize(),
+                            maxWidth: cell.column.columnDef.maxSize,
                           }}
                         >
                           {flexRender(
-- 
cgit v1.2.3