diff options
Diffstat (limited to 'components/client-data-table/data-table.tsx')
| -rw-r--r-- | components/client-data-table/data-table.tsx | 84 |
1 files changed, 15 insertions, 69 deletions
diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx index ff10bfe4..9336db62 100644 --- a/components/client-data-table/data-table.tsx +++ b/components/client-data-table/data-table.tsx @@ -63,24 +63,6 @@ export function ClientDataTable<TData, TValue>({ const [sorting, setSorting] = React.useState<SortingState>([]) const [grouping, setGrouping] = React.useState<string[]>([]) const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({}) - - // 실제 리사이징 상태만 추적 - const [isResizing, setIsResizing] = React.useState(false) - - // 리사이징 상태를 추적하기 위한 ref - const isResizingRef = React.useRef(false) - - // 리사이징 이벤트 핸들러 - const handleResizeStart = React.useCallback(() => { - isResizingRef.current = true - setIsResizing(true) - }, []) - - const handleResizeEnd = React.useCallback(() => { - isResizingRef.current = false - setIsResizing(false) - }, []) - const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({ left: [], right: ["update"], @@ -115,41 +97,12 @@ export function ClientDataTable<TData, TValue>({ getGroupedRowModel: getGroupedRowModel(), autoResetPageIndex: false, getExpandedRowModel: getExpandedRowModel(), - enableColumnPinning:true, - onColumnPinningChange:setColumnPinning - + enableColumnPinning: true, + onColumnPinningChange: setColumnPinning }) useAutoSizeColumns(table, autoSizeColumns) - // 컴포넌트 마운트 시 강제로 리사이징 상태 초기화 - React.useEffect(() => { - // 강제로 초기 상태는 리사이징 비활성화 - setIsResizing(false) - isResizingRef.current = false - - // 전역 마우스 이벤트 핸들러 - const handleMouseUp = () => { - if (isResizingRef.current) { - handleResizeEnd() - } - } - - // 이벤트 리스너 등록 - window.addEventListener('mouseup', handleMouseUp) - window.addEventListener('touchend', handleMouseUp) - - return () => { - // 이벤트 리스너 정리 - window.removeEventListener('mouseup', handleMouseUp) - window.removeEventListener('touchend', handleMouseUp) - - // 컴포넌트 언마운트 시 정리 - setIsResizing(false) - isResizingRef.current = false - } - }, [handleResizeEnd]) - React.useEffect(() => { if (!onSelectedRowsChange) return const selectedRows = table @@ -188,27 +141,25 @@ export function ClientDataTable<TData, TValue>({ <TableHead key={header.id} colSpan={header.colSpan} - className="relative" + data-column-id={header.column.id} style={{ ...getCommonPinningStyles({ column: header.column }), width: header.getSize() }} > - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() + <div style={{ position: "relative" }}> + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + {/* 리사이즈 핸들 - 헤더에만 추가 */} + {header.column.getCanResize() && ( + <DataTableResizer header={header} /> )} - - {/* 리사이즈 핸들 - 헤더에만 추가 */} - {header.column.getCanResize() && ( - <DataTableResizer - header={header} - onResizeStart={handleResizeStart} - onResizeEnd={handleResizeEnd} - /> - )} + </div> </TableHead> ) })} @@ -322,11 +273,6 @@ export function ClientDataTable<TData, TValue>({ )} </TableBody> </UiTable> - - {/* 리사이징 시에만 캡처 레이어 활성화 */} - {isResizing && ( - <div className="fixed inset-0 cursor-col-resize select-none z-50" /> - )} </div> </div> |
