(김준회) fix: data-table 공통컴포넌트의 nested columns에 대한 child column의 width 오류 수정

1 files changed, 12 insertions, 6 deletions

diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 07e4dcd2..2eb3e020 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -75,7 +75,8 @@ export function DataTable<TData>({
     <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
       {stableChildren}
       <div className="max-w-[100vw] overflow-auto"  style={{ maxHeight: maxHeight || '35rem' }} >
-        <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
+        <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
+          {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
           {/* 테이블 헤더 */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -92,11 +93,15 @@ export function DataTable<TData>({
                       data-column-id={header.column.id}
                       className={cn(compactStyles.header, "whitespace-normal break-words")}
                       style={{
-                        ...getCommonPinningStylesWithBorder({ 
-                          column: header.column, 
-                          isHeader: true 
+                        ...getCommonPinningStylesWithBorder({
+                          column: header.column,
+                          isHeader: true
+                        }),
+                        // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                        // 자식 헤더만 개별 width 설정
+                        ...(!('columns' in header.column.columnDef) && {
+                          width: header.getSize()
                         }),
-                        width: header.getSize(),
                       }}
                     >
                       <div style={{ position: "relative" }}>
@@ -107,7 +112,8 @@ export function DataTable<TData>({
                             header.getContext()
                           )}
 
-                        {header.column.getCanResize() && (
+                        {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                        {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                           <DataTableResizer header={header} />
                         )}
                       </div>