diff options
Diffstat (limited to 'components/client-data-table/data-table.tsx')
| -rw-r--r-- | components/client-data-table/data-table.tsx | 16 |
1 files changed, 14 insertions, 2 deletions
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}> |