From 06cf51e5dd14e118fa8dbb8c666d78ace61cbf9b Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Tue, 28 Oct 2025 14:26:44 +0900 Subject: (김준회) fix: 공통컴포넌트: 데이터 그리드: 중첩헤더 있는 경우의 width 계산 및 스타일 적용문제 해결 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/data-table/infinite-data-table.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'components/data-table/infinite-data-table.tsx') diff --git a/components/data-table/infinite-data-table.tsx b/components/data-table/infinite-data-table.tsx index 0242e052..a17a9b55 100644 --- a/components/data-table/infinite-data-table.tsx +++ b/components/data-table/infinite-data-table.tsx @@ -154,8 +154,9 @@ export function InfiniteDataTable({ 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 적용 */} {/* 테이블 헤더 */} {table.getHeaderGroups().map((headerGroup) => ( @@ -175,7 +176,11 @@ export function InfiniteDataTable({ ...getPinnedStyle(header.column, true), // 🎯 헤더임을 명시 // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음 // 자식 헤더만 개별 width 설정 - ...(!('columns' in header.column.columnDef) && { width: header.getSize() }), + ...(!('columns' in header.column.columnDef) && { + width: header.getSize(), + minWidth: header.getSize(), + maxWidth: header.column.columnDef.maxSize, + }), }} >
@@ -272,7 +277,9 @@ export function InfiniteDataTable({ className={compactStyles.cell} style={{ ...getPinnedStyle(cell.column, false), // 🎯 바디 셀임을 명시 - width: cell.column.getSize(), // 🎯 width 별도 설정 + width: cell.column.getSize(), + minWidth: cell.column.getSize(), + maxWidth: cell.column.columnDef.maxSize, }} > {flexRender( -- cgit v1.2.3