diff options
Diffstat (limited to 'components/data-table/data-table.tsx')
| -rw-r--r-- | components/data-table/data-table.tsx | 17 |
1 files changed, 14 insertions, 3 deletions
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx index 44cbd47b..f6d3af73 100644 --- a/components/data-table/data-table.tsx +++ b/components/data-table/data-table.tsx @@ -78,6 +78,12 @@ export function DataTable<TData>({ return children; }, [children]); + // 🎯 테이블 총 너비 계산 (nested header가 있을 때만 사용) + const getTableWidth = React.useCallback(() => { + const totalSize = table.getCenterTotalSize() + table.getLeftTotalSize() + table.getRightTotalSize() + return Math.max(totalSize, 800) // 최소 800px 보장 + }, [table]) + return ( <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}> {stableChildren} @@ -86,8 +92,9 @@ export function DataTable<TData>({ className={cn( "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10", !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용 - )}> - {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */} + )} + style={{ minWidth: hasNestedHeader ? getTableWidth() : undefined }}> + {/* nested header가 있으면 table-fixed 제거하고 minWidth로 너비 강제, 없으면 table-fixed 적용 */} {/* 테이블 헤더 */} <TableHeader> {table.getHeaderGroups().map((headerGroup) => ( @@ -116,7 +123,9 @@ export function DataTable<TData>({ // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음 // 자식 헤더만 개별 width 설정 ...(!('columns' in header.column.columnDef) && { - width: header.getSize() + width: header.getSize(), + minWidth: header.getSize(), + maxWidth: header.column.columnDef.maxSize, }), }} > @@ -214,6 +223,8 @@ export function DataTable<TData>({ style={{ ...getCommonPinningStylesWithBorder({ column: cell.column }), width: cell.column.getSize(), + minWidth: cell.column.getSize(), + maxWidth: cell.column.columnDef.maxSize, }} > {flexRender( |