@ehfuse/mui-virtual-data-table 1.0.1 → 1.0.3

package/README.md

@@ -108,6 +108,10 @@ function App() {
     columnHeight={number}                   // Header height in px (default: 56, auto 2x for grouped headers)
     showPaper={boolean}                     // Wrap in Paper component (default: true)
     paddingX={string | number}              // Horizontal padding (default: "1rem")
+    paddingTop={string | number}            // Top padding (default: 0)
+    paddingBottom={string | number}         // Bottom padding (default: 0)
+    rowHoverColor={string}                  // Row hover background color (default: "#000000", auto-inverted brightness in dark mode)
+    rowHoverOpacity={number}                // Row hover opacity 0-1 (default: 0.06)
 
     // Optional - Infinite Scroll
     loading={boolean}                       // Loading state (default: false)

package/dist/VirtualDataTable.d.ts

@@ -3,7 +3,7 @@
  *
  * MIT License
  *
- import { VirtuosoScrollbar } from './components/Scrollbar'; Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)
+ * Copyright (c) 2025 KIM YOUNG JIN (ehfuse@gmail.com)
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
  * of this software and associated documentation files (the "Software"), to deal

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, forwardRef, useMemo, useImperativeHandle, useCallback, memo } from 'react';
+import { useRef, useState, useEffect, forwardRef, useMemo, useCallback, useImperativeHandle, useLayoutEffect, memo } from 'react';
 import { Box, CircularProgress, TableContainer, TableRow, TableCell, TableSortLabel, TableBody, TableHead, Table, Typography, Paper } from '@mui/material';
 import { TableVirtuoso } from 'react-virtuoso';
 
@@ -531,6 +531,21 @@ showScrollbar = true, }, ref) => {
     const thumbMinHeight = finalThumbConfig.minHeight;
     const showArrows = finalArrowsConfig.visible;
     const arrowStep = finalArrowsConfig.step;
+    // 포커스 유지 함수 (키보드 입력이 계속 작동하도록)
+    const maintainFocus = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        // 현재 포커스된 요소 확인
+        const activeElement = document.activeElement;
+        // 오버레이 스크롤바 내부에 이미 포커스된 요소가 있으면 스킵
+        if (activeElement &&
+            containerRef.current.contains(activeElement) &&
+            activeElement !== containerRef.current) {
+            return;
+        }
+        // 포커스된 요소가 없거나 외부에 있으면 컨테이너에 포커스
+        containerRef.current.focus();
+    }, []);
     // ref를 통해 외부에서 스크롤 컨테이너에 접근할 수 있도록 함
     useImperativeHandle(ref, () => ({
         getScrollContainer: () => containerRef.current,
@@ -654,7 +669,6 @@ showScrollbar = true, }, ref) => {
     ]);
     // 썸 드래그 시작
     const handleThumbMouseDown = useCallback((event) => {
-        var _a;
         event.preventDefault();
         event.stopPropagation();
         const actualScrollContainer = findScrollableElement();
@@ -669,8 +683,8 @@ showScrollbar = true, }, ref) => {
         clearHideTimer();
         setScrollbarVisible(true);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [findScrollableElement, clearHideTimer]);
+        maintainFocus();
+    }, [findScrollableElement, clearHideTimer, maintainFocus]);
     // 썸 드래그 중
     const handleMouseMove = useCallback((event) => {
         if (!isDragging)
@@ -704,7 +718,6 @@ showScrollbar = true, }, ref) => {
     }, [isScrollable, setHideTimer, finalAutoHideConfig.delay]);
     // 트랙 클릭으로 스크롤 점프
     const handleTrackClick = useCallback((event) => {
-        var _a;
         if (!scrollbarRef.current) {
             return;
         }
@@ -724,16 +737,16 @@ showScrollbar = true, }, ref) => {
         setScrollbarVisible(true);
         setHideTimer(finalAutoHideConfig.delay);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        maintainFocus();
     }, [
         updateScrollbar,
         setHideTimer,
         finalAutoHideConfig.delay,
         findScrollableElement,
+        maintainFocus,
     ]);
     // 위쪽 화살표 클릭 핸들러
     const handleUpArrowClick = useCallback((event) => {
-        var _a;
         event.preventDefault();
         event.stopPropagation();
         if (!containerRef.current)
@@ -744,16 +757,16 @@ showScrollbar = true, }, ref) => {
         setScrollbarVisible(true);
         setHideTimer(finalAutoHideConfig.delay);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        maintainFocus();
     }, [
         updateScrollbar,
         setHideTimer,
         arrowStep,
         finalAutoHideConfig.delay,
+        maintainFocus,
     ]);
     // 아래쪽 화살표 클릭 핸들러
     const handleDownArrowClick = useCallback((event) => {
-        var _a;
         event.preventDefault();
         event.stopPropagation();
         if (!containerRef.current || !contentRef.current)
@@ -767,12 +780,13 @@ showScrollbar = true, }, ref) => {
         setScrollbarVisible(true);
         setHideTimer(finalAutoHideConfig.delay);
         // 포커스 유지 (키보드 입력이 계속 작동하도록)
-        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        maintainFocus();
     }, [
         updateScrollbar,
         setHideTimer,
         arrowStep,
         finalAutoHideConfig.delay,
+        maintainFocus,
     ]);
     // 드래그 스크롤 시작
     const handleDragScrollStart = useCallback((event) => {
@@ -1020,7 +1034,7 @@ showScrollbar = true, }, ref) => {
         return () => clearTimeout(timer);
     }, [updateScrollbar]);
     // 컴포넌트 초기화 완료 표시 (hover 이벤트 활성화용)
-    useEffect(() => {
+    useLayoutEffect(() => {
         const timer = setTimeout(() => {
             setIsInitialized(true);
             // 초기화 후 스크롤바 업데이트 (썸 높이 정확하게 계산)
@@ -1029,11 +1043,7 @@ showScrollbar = true, }, ref) => {
             if (!finalAutoHideConfig.enabled && isScrollable()) {
                 setScrollbarVisible(true);
             }
-            // 스크롤 컨테이너에 자동 포커스 (키보드 네비게이션 활성화)
-            if (containerRef.current) {
-                containerRef.current.focus();
-            }
-        }, 100);
+        }, 0);
         return () => clearTimeout(timer);
     }, [isScrollable, updateScrollbar, finalAutoHideConfig.enabled]);
     // Resize observer로 크기 변경 감지
@@ -1263,7 +1273,7 @@ const OVERLAY_SCROLLBAR_TRACK_CONFIG = {
 /**
  * 데이터 기반 무한 스크롤 및 가상화를 지원하는 테이블 컴포넌트
  */
-function VirtualDataTableComponent({ data, loading = false, columns, onRowClick, rowHeight = 50, columnHeight = 56, striped, rowDivider = true, onSort, onLoadMore, sortBy, sortDirection, showPaper = true, paddingX = "1rem", scrollbars, emptyMessage = "NO DATA", LoadingComponent, }) {
+function VirtualDataTableComponent({ data, loading = false, columns, onRowClick, rowHeight = 50, columnHeight = 56, striped, rowDivider = true, onSort, onLoadMore, sortBy, sortDirection, showPaper = true, paddingX = "1rem", paddingTop = 0, paddingBottom = 0, rowHoverColor, rowHoverOpacity, scrollbars, emptyMessage = "NO DATA", LoadingComponent, }) {
     // console.log("=== VirtualDataTable 렌더링 ===", {
     //     dataLength: data.length,
     //     loading,
@@ -1303,11 +1313,13 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                     },
                     "& .MuiTable-root": {
                         paddingRight: paddingX,
+                        paddingTop: paddingTop,
+                        paddingBottom: paddingBottom,
                     },
                 } }) }));
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [] // 빈 배열: 최초 마운트 시에만 생성, scrollbars와 paddingX는 클로저로 고정
+    [] // 빈 배열: 최초 마운트 시에만 생성, scrollbars, paddingX, paddingTop, paddingBottom은 클로저로 고정
     );
     // Striped row 배경색 계산
     const stripedRowColor = useMemo(() => {
@@ -1350,6 +1362,9 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
     const isMouseDownRef = useRef(false);
     const initialScrollTopRef = useRef(0);
     const totalDragDistanceRef = useRef(0);
+    const isScrollDraggingRef = useRef(false); // OverlayScrollbar 드래그 스크롤 감지용
+    const mouseDownPositionRef = useRef({ x: 0, y: 0 }); // 마우스 다운 시작 위치
+    useRef(null);
     /**
      * 마우스 버튼 누름 이벤트 핸들러
      * OverlayScrollbar 사용시에는 기본 드래그 스크롤을 비활성화
@@ -1374,7 +1389,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
             // DOM 스타일 직접 변경 (리렌더링 방지)
             if (scrollContainerRef.current) {
                 scrollContainerRef.current.style.userSelect = "none";
-                scrollContainerRef.current.style.webkitUserSelect = "none";
             }
         }
         if (isDraggingRef.current) {
@@ -1418,7 +1432,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
         // DOM 스타일 초기화
         if (scrollContainerRef.current) {
             scrollContainerRef.current.style.userSelect = "auto";
-            scrollContainerRef.current.style.webkitUserSelect = "auto";
         }
     }, []);
     // 정렬이 변경될 때 모든 TableSortLabel의 hover 상태 초기화
@@ -1461,8 +1474,8 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
             return;
         }
         window.lastRangeChangeTime = now;
-        // 더 보수적인 조건: 85% 지점에서 로드 (기존 VirtualDataTable 방식)
-        const bufferSize = Math.max(10, Math.floor(data.length * 0.15)); // 데이터의 15% 또는 최소 10개
+        // 더 보수적인 조건: 90% 지점에서 로드 (기존 VirtualDataTable 방식)
+        const bufferSize = Math.max(10, Math.floor(data.length * 0.1)); // 데이터의 10% 또는 최소 10개
         const shouldLoadMore = range.endIndex >= data.length - bufferSize;
         // 추가 조건: 최소 30개 이상의 데이터에서만 더 가져오기 실행
         const hasMinimumData = data.length >= 30;
@@ -1538,7 +1551,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                         width: col.width,
                         minWidth: col.width,
                         ...col.style,
-                        backgroundColor: "#ffffff",
                         fontWeight: "bold",
                         position: "sticky",
                         top: 0,
@@ -1599,7 +1611,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                     width: col.width,
                     minWidth: col.width,
                     ...col.style,
-                    backgroundColor: "#ffffff",
                     fontWeight: "bold",
                     position: "sticky",
                     top: 0,
@@ -1661,7 +1672,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                                     },
                                 } })] }) })) : (col.text) }, String(col.id)))),
             ...Object.entries(groupMap).map(([group, cols]) => (jsx(TableCell, { align: "center", colSpan: cols.length, style: {
-                    backgroundColor: "#ffffff",
                     fontWeight: "bold",
                     position: "sticky",
                     top: 0,
@@ -1676,7 +1686,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                     width: col.width,
                     minWidth: col.width,
                     ...col.style,
-                    backgroundColor: "#ffffff",
                     fontWeight: "bold",
                     position: "sticky",
                     top: 0,
@@ -1776,7 +1785,6 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                     height: columnHeight,
                     "& th": {
                         padding: "16px",
-                        backgroundColor: "#ffffff",
                         position: "sticky",
                         top: 0,
                         zIndex: 2,
@@ -1791,10 +1799,32 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
             // react-virtuoso는 'data-index' 속성으로 index를 전달합니다
             const rowIndex = rest["data-index"] ?? 0;
             const isOddRow = rowIndex % 2 === 1;
-            return (jsx(TableRow, { ...rest, onClick: () => {
-                    if (!isDraggingRef.current && item && onRowClick) {
+            return (jsx(TableRow, { ...rest, onMouseDown: (e) => {
+                    // 마우스 다운 시 드래그 플래그 초기화 및 시작 위치 저장
+                    isScrollDraggingRef.current = false;
+                    mouseDownPositionRef.current = {
+                        x: e.clientX,
+                        y: e.clientY,
+                    };
+                }, onMouseMove: (e) => {
+                    // 마우스가 5px 이상 움직였을 때만 드래그로 간주
+                    const deltaX = Math.abs(e.clientX - mouseDownPositionRef.current.x);
+                    const deltaY = Math.abs(e.clientY - mouseDownPositionRef.current.y);
+                    const dragThreshold = 5; // 5px 임계값
+                    if (deltaX > dragThreshold ||
+                        deltaY > dragThreshold) {
+                        isScrollDraggingRef.current = true;
+                    }
+                }, onClick: () => {
+                    // 드래그 스크롤이 아니고, 아이템이 있고, onRowClick이 있을 때만 실행
+                    if (!isScrollDraggingRef.current &&
+                        !isDraggingRef.current &&
+                        item &&
+                        onRowClick) {
                         onRowClick(item, rowIndex);
                     }
+                    // 클릭 후 플래그 리셋
+                    isScrollDraggingRef.current = false;
                 }, sx: {
                     userSelect: "none",
                     height: rowHeight,
@@ -1813,7 +1843,85 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                     },
                     "&:hover": onRowClick
                         ? {
-                            backgroundColor: "#E3EEFA",
+                            backgroundColor: (theme) => {
+                                const isDark = theme.palette.mode === "dark";
+                                const defaultColor = "#000000";
+                                const color = rowHoverColor ?? defaultColor;
+                                const opacity = rowHoverOpacity ?? 0.06;
+                                // hex를 rgb로 변환
+                                const hex = color.replace("#", "");
+                                let r = parseInt(hex.substring(0, 2), 16) / 255;
+                                let g = parseInt(hex.substring(2, 4), 16) / 255;
+                                let b = parseInt(hex.substring(4, 6), 16) / 255;
+                                // 다크 모드일 때 밝기만 반전 (HSL 변환)
+                                if (isDark) {
+                                    // RGB to HSL
+                                    const max = Math.max(r, g, b);
+                                    const min = Math.min(r, g, b);
+                                    let h = 0, s = 0, l = (max + min) / 2;
+                                    if (max !== min) {
+                                        const d = max - min;
+                                        s =
+                                            l > 0.5
+                                                ? d / (2 - max - min)
+                                                : d / (max + min);
+                                        switch (max) {
+                                            case r:
+                                                h =
+                                                    ((g - b) / d +
+                                                        (g < b
+                                                            ? 6
+                                                            : 0)) /
+                                                        6;
+                                                break;
+                                            case g:
+                                                h =
+                                                    ((b - r) / d +
+                                                        2) /
+                                                        6;
+                                                break;
+                                            case b:
+                                                h =
+                                                    ((r - g) / d +
+                                                        4) /
+                                                        6;
+                                                break;
+                                        }
+                                    }
+                                    // 밝기만 반전 (0.0 <-> 1.0)
+                                    l = 1 - l;
+                                    // HSL to RGB
+                                    const hue2rgb = (p, q, t) => {
+                                        if (t < 0)
+                                            t += 1;
+                                        if (t > 1)
+                                            t -= 1;
+                                        if (t < 1 / 6)
+                                            return (p + (q - p) * 6 * t);
+                                        if (t < 1 / 2)
+                                            return q;
+                                        if (t < 2 / 3)
+                                            return (p +
+                                                (q - p) *
+                                                    (2 / 3 - t) *
+                                                    6);
+                                        return p;
+                                    };
+                                    if (s === 0) {
+                                        r = g = b = l;
+                                    }
+                                    else {
+                                        const q = l < 0.5
+                                            ? l * (1 + s)
+                                            : l + s - l * s;
+                                        const p = 2 * l - q;
+                                        r = hue2rgb(p, q, h + 1 / 3);
+                                        g = hue2rgb(p, q, h);
+                                        b = hue2rgb(p, q, h - 1 / 3);
+                                    }
+                                }
+                                return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${opacity})`;
+                            },
                             transition: "background-color 0.2s ease",
                         }
                         : {},
@@ -1828,6 +1936,8 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
         stripedRowColor,
         rowDivider,
         columnHeight,
+        rowHoverColor,
+        rowHoverOpacity,
         VirtuosoScroller,
     ]);
     // 공통 테이블 내용
@@ -1835,6 +1945,11 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
             position: "relative",
             height: "100%",
             width: "100%",
+            "& .MuiTableHead-root": {
+                backgroundColor: (theme) => theme.palette.mode === "dark"
+                    ? "#1e1e1e !important"
+                    : "#ffffff !important",
+            },
         }, children: [jsx(TableVirtuoso, { ref: virtuosoRef, data: data, totalCount: onLoadMore ? data.length + 1 : data.length, fixedHeaderContent: fixedHeaderContent, itemContent: rowContent, rangeChanged: handleRangeChange, components: VirtuosoTableComponents, style: { height: "100%" }, increaseViewportBy: { top: 100, bottom: 300 }, overscan: 5, followOutput: false }, tableKey), data.length === 0 && !loading && (jsx(Box, { sx: {
                     position: "absolute",
                     top: 0,
@@ -1863,7 +1978,7 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
                         show: data.length === 0, // 최초 로딩에만 배경 표시
                         opacity: 0.8,
                     } })) }))] }));
-    return showPaper ? (jsx(Paper, { className: "grow", style: {
+    return showPaper ? (jsx(Paper, { className: "grow", elevation: 1, sx: {
             padding: 0,
             paddingLeft: paddingX,
             height: "100%",