@ehfuse/mui-virtual-data-table 1.0.5 → 1.0.7

package/dist/index.js

@@ -444,6 +444,7 @@ showScrollbar = true, }, ref) => {
             autoHide,
         };
     });
+    const wrapperRef = react.useRef(null);
     const containerRef = react.useRef(null);
     const contentRef = react.useRef(null);
     const scrollbarRef = react.useRef(null);
@@ -673,12 +674,20 @@ showScrollbar = true, }, ref) => {
         const containerHeight = scrollableElement.clientHeight;
         const contentHeight = scrollableElement.scrollHeight;
         const scrollTop = scrollableElement.scrollTop;
+        // wrapper의 패딩 계산 (상하 패딩만 필요)
+        let wrapperPaddingTopBottom = 0;
+        if (wrapperRef.current) {
+            const computedStyle = window.getComputedStyle(wrapperRef.current);
+            const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+            const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+            wrapperPaddingTopBottom = paddingTop + paddingBottom;
+        }
         // 화살표와 간격 공간 계산 (화살표 + 위아래 마진, 화살표 없어도 위아래 마진)
         const arrowSpace = showArrows
             ? finalThumbWidth * 2 + finalTrackConfig.margin * 4
             : finalTrackConfig.margin * 2;
-        // 썸 높이 계산 (사용자 설정 최소 높이 사용, 화살표 공간 제외)
-        const availableHeight = containerHeight - arrowSpace;
+        // 썸 높이 계산 (사용자 설정 최소 높이 사용, 화살표 공간 제외, wrapper 패딩 추가)
+        const availableHeight = containerHeight - arrowSpace + wrapperPaddingTopBottom;
         const scrollRatio = containerHeight / contentHeight;
         const calculatedThumbHeight = Math.max(availableHeight * scrollRatio, thumbMinHeight);
         // 썸 위치 계산 (화살표와 간격 공간 제외)
@@ -1171,11 +1180,11 @@ showScrollbar = true, }, ref) => {
             }
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: `overlay-scrollbar-wrapper ${className}`, style: Object.assign({ display: "flex", flexDirection: "column", position: "relative", minHeight: 0, height: "100%", flex: "1 1 0%" }, style), children: [jsxRuntime.jsx("div", { ref: containerRef, className: "overlay-scrollbar-container", tabIndex: -1, onMouseDown: handleDragScrollStart, style: Object.assign({ width: "100%", height: "100%", flex: "1 1 auto", minHeight: 0, overflow: "auto", 
+    return (jsxRuntime.jsxs("div", { ref: wrapperRef, className: `overlay-scrollbar-wrapper ${className}`, style: Object.assign({ display: "flex", flexDirection: "column", position: "relative", minHeight: 0, height: "100%", flex: "1 1 0%" }, style), children: [jsxRuntime.jsx("div", { ref: containerRef, className: "overlay-scrollbar-container", tabIndex: -1, onMouseDown: handleDragScrollStart, style: Object.assign({ display: "flex", width: "100%", flex: "1 1 auto", minHeight: 0, overflow: "auto", 
                     // 브라우저 기본 스크롤바만 숨기기
                     scrollbarWidth: "none", msOverflowStyle: "none", 
                     // 키보드 포커스 스타일 (접근성)
-                    outline: "none", userSelect: isDragScrolling ? "none" : "auto" }, containerStyle), children: jsxRuntime.jsx("div", { ref: contentRef, className: "overlay-scrollbar-content", style: Object.assign({ minHeight: 0, display: "flex", flexDirection: "column" }, contentStyle), children: children }) }), showScrollbar && hasScrollableContent && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
+                    outline: "none", userSelect: isDragScrolling ? "none" : "auto" }, containerStyle), children: jsxRuntime.jsx("div", { ref: contentRef, className: "overlay-scrollbar-content", style: Object.assign({ flex: "1 1 0%", minHeight: 0, display: "flex", flexDirection: "column" }, contentStyle), children: children }) }), showScrollbar && hasScrollableContent && (jsxRuntime.jsxs("div", { ref: scrollbarRef, className: "overlay-scrollbar-track", onMouseEnter: () => {
                     clearHideTimer();
                     setScrollbarVisible(true);
                 }, onMouseLeave: () => {
@@ -1313,7 +1322,7 @@ function VirtualDataTableComponent({ data, loading = false, columns, onRowClick,
     // 각 테이블 인스턴스별로 Scroller 컴포넌트 생성 (scrollbars, paddingX를 초기값으로 고정)
     const VirtuosoScroller = react.useMemo(() => react.forwardRef((props, ref) => {
         const scrollContainerRef = react.useRef(null);
-        return (jsxRuntime.jsx(OverlayScrollbar, { track: OVERLAY_SCROLLBAR_TRACK_CONFIG, contentStyle: { height: "100%" }, ...scrollbars, children: jsxRuntime.jsx(material.TableContainer, { component: material.Box, ...props, ref: (node) => {
+        return (jsxRuntime.jsx(OverlayScrollbar, { track: OVERLAY_SCROLLBAR_TRACK_CONFIG, ...scrollbars, children: jsxRuntime.jsx(material.TableContainer, { component: material.Box, ...props, ref: (node) => {
                     scrollContainerRef.current =
                         node;
                     if (typeof ref === "function") {