diff options
| author | joonhoekim <26rote@gmail.com> | 2025-10-10 11:45:21 +0900 |
|---|---|---|
| committer | joonhoekim <26rote@gmail.com> | 2025-10-10 11:45:21 +0900 |
| commit | 631b09172b48ec24c4f0131bc97017b87ddf0c47 (patch) | |
| tree | 3375cce9de1662aedf42b29158118baf79e93007 /components/client-data-table | |
| parent | 9eec700c9627d91aaf52a89d1bfb0ae0e21eb49a (diff) | |
(김준회) fix: data-table 공통컴포넌트의 nested columns에 대한 child column의 width 오류 수정
Diffstat (limited to 'components/client-data-table')
| -rw-r--r-- | components/client-data-table/data-table.tsx | 11 |
1 files changed, 7 insertions, 4 deletions
diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx index 9ea44775..44168bd2 100644 --- a/components/client-data-table/data-table.tsx +++ b/components/client-data-table/data-table.tsx @@ -203,7 +203,8 @@ export function ClientDataTable<TData, TValue>({ onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가 > <UiTable - className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed"> + className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10"> + {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */} <TableHeader> {table.getHeaderGroups().map((headerGroup) => ( <TableRow key={headerGroup.id} className={compactStyles.headerRow}> @@ -221,7 +222,9 @@ export function ClientDataTable<TData, TValue>({ className={compactStyles.header} style={{ ...getPinnedStyle(header.column, true), // 🎯 헤더임을 명시 - width: header.getSize() // 🎯 width 별도 설정 + // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음 + // 자식 헤더만 개별 width 설정 + ...(!('columns' in header.column.columnDef) && { width: header.getSize() }), }} > <div style={{ position: "relative" }}> @@ -232,8 +235,8 @@ export function ClientDataTable<TData, TValue>({ header.getContext() )} - {/* 리사이즈 핸들 - 헤더에만 추가 */} - {header.column.getCanResize() && ( + {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */} + {header.column.getCanResize() && !('columns' in header.column.columnDef) && ( <DataTableResizer header={header} /> )} </div> |