diff options
Diffstat (limited to 'components/data-table/data-table.tsx')
| -rw-r--r-- | components/data-table/data-table.tsx | 15 |
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) => ( |