diff options
Diffstat (limited to 'hooks/useAutoSizeColumns.ts')
| -rw-r--r-- | hooks/useAutoSizeColumns.ts | 40 |
1 files changed, 31 insertions, 9 deletions
diff --git a/hooks/useAutoSizeColumns.ts b/hooks/useAutoSizeColumns.ts index 3750de97..6e9cc7dc 100644 --- a/hooks/useAutoSizeColumns.ts +++ b/hooks/useAutoSizeColumns.ts @@ -1,6 +1,13 @@ -// hooks/useAutoSizeColumns.ts import { useEffect, useRef } from "react" -import { Table } from "@tanstack/react-table" +import { Table, ColumnDef } from "@tanstack/react-table" + +// 커스텀 메타 타입 정의 +declare module '@tanstack/react-table' { + interface ColumnMeta<TData, TValue> { + paddingFactor?: number; + excelHeader?: string; + } +} export function useAutoSizeColumns<T>( table: Table<T>, @@ -29,7 +36,7 @@ export function useAutoSizeColumns<T>( const columnId = column.id // Get column-specific padding from meta if available - const paddingFactor = column.columnDef.meta?.paddingFactor as number || 1 + const paddingFactor = column.columnDef.meta?.paddingFactor || 1 const extraPadding = paddingFactor * defaultPadding // Get all cells for this column @@ -41,15 +48,30 @@ export function useAutoSizeColumns<T>( measureElement.style.position = 'absolute' measureElement.style.visibility = 'hidden' measureElement.style.whiteSpace = 'nowrap' - measureElement.style.font = headerElement - ? window.getComputedStyle(headerElement).font + measureElement.style.font = headerElement + ? window.getComputedStyle(headerElement).font : window.getComputedStyle(document.body).font document.body.appendChild(measureElement) - // Measure header - const headerText = headerElement?.textContent || "" - measureElement.textContent = headerText - let maxWidth = measureElement.getBoundingClientRect().width + // Measure header - 헤더 요소 자체의 너비를 직접 측정 + let headerWidth = 0 + if (headerElement) { + // 1. 먼저 텍스트 콘텐츠 측정 + const headerText = headerElement.textContent || "" + measureElement.textContent = headerText + headerWidth = measureElement.getBoundingClientRect().width + + // 2. 헤더에 아이콘이나 다른 요소가 있을 경우를 고려 + // 헤더 요소의 실제 너비 확인 (텍스트외 요소 포함) + const headerClientWidth = headerElement.querySelector('div')?.clientWidth || + headerElement.clientWidth || 0 + + // 텍스트 너비와 실제 요소 너비 중 큰 값 선택 + headerWidth = Math.max(headerWidth, headerClientWidth) + } + + // 초기 최대 너비를 헤더 너비로 설정 + let maxWidth = headerWidth // Measure cells (limit to first 20 for performance) Array.from(cells).slice(0, 20).forEach(cell => { |