summaryrefslogtreecommitdiff
path: root/components/client-data-table
diff options
context:
space:
mode:
Diffstat (limited to 'components/client-data-table')
-rw-r--r--components/client-data-table/data-table.tsx84
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>