(김준회) fix: nested column 에만 table-fixed 속성 적용하도록 조건부 처리

1 files changed, 13 insertions, 2 deletions

diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index f344904e..44cbd47b 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -60,6 +60,13 @@ export function DataTable<TData>({
 
   useAutoSizeColumns(table, autoSizeColumns)
 
+  // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+  const hasNestedHeader = React.useMemo(() => {
+    return table.getHeaderGroups().some(headerGroup =>
+      headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+    )
+  }, [table])
+
   // ✅ compactStyles를 useMemo로 메모이제이션
   const compactStyles = React.useMemo(() => 
     compact ? COMPACT_STYLES : NORMAL_STYLES, 
@@ -75,8 +82,12 @@ 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 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
+        <Table
+          className={cn(
+            "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+            !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+          )}>
+          {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
           {/* 테이블 헤더 */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (