From 631b09172b48ec24c4f0131bc97017b87ddf0c47 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Fri, 10 Oct 2025 11:45:21 +0900
Subject: (김준회) fix: data-table 공통컴포넌트의 nested columns에 대한 child
 column의 width 오류 수정
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index 9ea44775..44168bd2 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -203,7 +203,8 @@ export function ClientDataTable<TData, TValue>({
           onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
         >
           <UiTable
-          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
+          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
+            {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
@@ -221,7 +222,9 @@ export function ClientDataTable<TData, TValue>({
                         className={compactStyles.header}
                         style={{
                           ...getPinnedStyle(header.column, true), // 🎯 헤더임을 명시
-                          width: header.getSize() // 🎯 width 별도 설정
+                          // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                          // 자식 헤더만 개별 width 설정
+                          ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
                         }}
                       >
                         <div style={{ position: "relative" }}>
@@ -232,8 +235,8 @@ export function ClientDataTable<TData, TValue>({
                               header.getContext()
                             )}
                             
-                          {/* 리사이즈 핸들 - 헤더에만 추가 */}
-                          {header.column.getCanResize() && (
+                          {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                          {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                             <DataTableResizer header={header} />
                           )}
                         </div>
-- 
cgit v1.2.3