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