From 4bac8ab190787d09371691f541627a3eb5866fa6 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Fri, 10 Oct 2025 15:41:18 +0900
Subject: (김준회) fix: nested column 에만 table-fixed 속성 적용하도록 조건부
 처리
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/client-data-table/data-table.tsx     | 16 ++++++++++++++--
 components/data-table/data-table.tsx            | 15 +++++++++++++--
 components/data-table/expandable-data-table.tsx | 20 +++++++++++++-------
 components/data-table/infinite-data-table.tsx   | 20 +++++++++++++-------
 4 files changed, 53 insertions(+), 18 deletions(-)

(limited to 'components')

diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index 44168bd2..a38de73d 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -28,6 +28,7 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { getCommonPinningStylesWithBorder } from "@/lib/data-table"
+import { cn } from "@/lib/utils"
 import { ChevronRight, ChevronUp } from "lucide-react"
 
 import { ClientDataTableAdvancedToolbar } from "./data-table-toolbar"
@@ -184,6 +185,13 @@ export function ClientDataTable<TData, TValue>({
     emptyRow: "h-24",
   }
 
+  // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+  const hasNestedHeader = React.useMemo(() => {
+    return table.getHeaderGroups().some(headerGroup =>
+      headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+    )
+  }, [table])
+
   // (2) 렌더
   return (
     <div className="w-full space-y-2.5 overflow-auto">
@@ -203,8 +211,12 @@ export function ClientDataTable<TData, TValue>({
           onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
         >
           <UiTable
-          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
-            {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
+          className={cn(
+            "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+            !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+          )}
+          style={{ minWidth: hasNestedHeader ? getTableWidth() : undefined }}>
+            {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
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) => (
diff --git a/components/data-table/expandable-data-table.tsx b/components/data-table/expandable-data-table.tsx
index d36f0251..165ebd34 100644
--- a/components/data-table/expandable-data-table.tsx
+++ b/components/data-table/expandable-data-table.tsx
@@ -59,6 +59,13 @@ export function ExpandableDataTable<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])
+
   const containerRef = React.useRef<HTMLDivElement>(null)
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const [expandedHeights, setExpandedHeights] = React.useState<Map<string, number>>(new Map())
@@ -499,13 +506,12 @@ export function ExpandableDataTable<TData>({
           style={{ maxHeight: maxHeight || '34rem' }}
           onScroll={handleScroll}
         >
-          <Table 
-            className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"
-            style={{ 
-              width: getTableWidth(),
-              minWidth: '100%'
-            }}
-          >
+          <Table
+            className={cn(
+              "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+              !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
+            )}>
+            {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
             <TableHeader className="bg-background">
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
diff --git a/components/data-table/infinite-data-table.tsx b/components/data-table/infinite-data-table.tsx
index d766f35c..0242e052 100644
--- a/components/data-table/infinite-data-table.tsx
+++ b/components/data-table/infinite-data-table.tsx
@@ -53,6 +53,13 @@ export function InfiniteDataTable<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])
+
   // 🎯 스크롤 상태 감지 추가
   const [isScrolled, setIsScrolled] = React.useState(false)
 
@@ -143,13 +150,12 @@ export function InfiniteDataTable<TData>({
         style={{ maxHeight: maxHeight || '35rem' }}
         onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
       >
-        <Table 
-          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"
-          style={{ 
-            width: getTableWidth(), // 🎯 동적 너비 계산
-            minWidth: '100%'
-          }}
-        >
+        <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) => (
-- 
cgit v1.2.3