vgapp 1.3.9 → 1.4.0

package/app/modules/vgdynamictable/js/options.js

@@ -401,10 +401,14 @@ const DEFAULT_OPTIONS = {
         // Отступ сверху для sticky-header (px).
         // data-атрибуты: data-sticky-header-top-offset | data-stickyHeader-top
         top: 0,
-        // Максимальная высота viewport таблицы.
-        // data-атрибуты: data-sticky-header-max-height | data-stickyHeader-max
-        max: 0,
-    },
+        // Максимальная высота viewport таблицы.
+        // data-атрибуты: data-sticky-header-max-height | data-stickyHeader-max
+        max: 0,
+        // Рендерить отдельный sticky clone вместо sticky th.
+        // По умолчанию наследует stickyHeader.enable.
+        // data-attributes: data-sticky-header-clone
+        clone: null,
+    },
 
     search: {
         // Canonical key for enable flag.

package/app/modules/vgdynamictable/js/vgdynamictable.js

@@ -3026,12 +3026,34 @@ class VGDynamicTable extends BaseModule {
 		return false;
 	}
 
-	_isCloneStickyHeaderEnabled() {
-		if (this._parent && this._parent.classList.contains('table-sticky')) {
-			return true;
-		}
-		return Boolean(this._element && this._element.classList.contains('table-sticky'));
-	}
+	_isCloneStickyHeaderEnabled() {
+		const sticky = this._params.stickyHeader || {};
+		const cloneAttr = this._element.getAttribute('data-sticky-header-clone');
+		if (cloneAttr !== null) {
+			const normalized = String(cloneAttr).toLowerCase().trim();
+			return normalized !== 'false' && normalized !== '0';
+		}
+
+		if (sticky.clone !== undefined && sticky.clone !== null) {
+			const normalized = String(sticky.clone).toLowerCase().trim();
+			if (normalized === 'true' || normalized === '1') {
+				return true;
+			}
+			if (normalized === 'false' || normalized === '0') {
+				return false;
+			}
+			return Boolean(sticky.clone);
+		}
+
+		if (this._parent && this._parent.classList.contains('table-sticky')) {
+			return true;
+		}
+		if (this._element && this._element.classList.contains('table-sticky')) {
+			return true;
+		}
+
+		return this._isStickyHeaderEnabled();
+	}
 
 	_refreshStickyAndFixedLayout(options = {}) {
 		const immediate = Boolean(options && options.immediate);
@@ -3137,12 +3159,13 @@ class VGDynamicTable extends BaseModule {
 		};
 	}
 
-	_getCloneStickyHeaderOffsets() {
-		return {
-			top: this._readCssSizeVar('--vgdt-sticky-top', 0),
-			maxHeight: this._readCssSizeVar('--vgdt-sticky-max-height', 0),
-		};
-	}
+	_getCloneStickyHeaderOffsets() {
+		const configured = this._getStickyHeaderOffsets();
+		return {
+			top: configured.top || this._readCssSizeVar('--vgdt-sticky-top', 0),
+			maxHeight: configured.maxHeight || this._readCssSizeVar('--vgdt-sticky-max-height', 0),
+		};
+	}
 
 	_readCssSizeVar(name, fallback = 0) {
 		const sources = [this._parent, this._element, this._tableViewport].filter(Boolean);
@@ -3235,12 +3258,13 @@ class VGDynamicTable extends BaseModule {
 			}
 			if (state && state.headerWrap && state.headerWrap.parentElement) {
 				state.headerWrap.parentElement.removeChild(state.headerWrap);
-			}
-			this._cloneStickyState = null;
-			this._parent.style.removeProperty('--vgdt-sticky-clone-height');
-			if (scrollTarget && !this._isStickyHeaderEnabled()) {
-				scrollTarget.classList.remove('table-sticky-scroll');
-				scrollTarget.style.removeProperty('--vgdt-sticky-max-height');
+			}
+			this._cloneStickyState = null;
+			this._parent.style.removeProperty('--vgdt-sticky-clone-height');
+			this._parent.style.removeProperty('--vgdt-sticky-top');
+			if (scrollTarget && !this._isStickyHeaderEnabled()) {
+				scrollTarget.classList.remove('table-sticky-scroll');
+				scrollTarget.style.removeProperty('--vgdt-sticky-max-height');
 			}
 			this._updateLayoutResizeBinding();
 			return;
@@ -3252,10 +3276,11 @@ class VGDynamicTable extends BaseModule {
 
 		const offsets = this._getCloneStickyHeaderOffsets();
 
-		if (scrollTarget) {
-			if (offsets.maxHeight > 0) {
-				scrollTarget.classList.add('table-sticky-scroll');
-				scrollTarget.style.setProperty('--vgdt-sticky-max-height', `${offsets.maxHeight}px`);
+		if (scrollTarget) {
+			this._parent.style.setProperty('--vgdt-sticky-top', `${offsets.top}px`);
+			if (offsets.maxHeight > 0) {
+				scrollTarget.classList.add('table-sticky-scroll');
+				scrollTarget.style.setProperty('--vgdt-sticky-max-height', `${offsets.maxHeight}px`);
 			} else {
 				scrollTarget.classList.remove('table-sticky-scroll');
 				scrollTarget.style.removeProperty('--vgdt-sticky-max-height');
@@ -3693,17 +3718,20 @@ class VGDynamicTable extends BaseModule {
 		this._refreshStickyAndFixedLayout();
 	}
 
-	_scrollToPaginationTop() {
-		if (!this._isPaginationScrollToTopEnabled()) {
-			return;
-		}
-		if (this._tableViewport) {
-			this._tableViewport.scrollTop = 0;
-			this._tableViewport.scrollLeft = 0;
-		}
-		if (typeof window === 'undefined' || !this._parent) {
-			return;
-		}
+	_scrollToPaginationTop() {
+		if (!this._isPaginationScrollToTopEnabled()) {
+			return;
+		}
+		if (this._tableViewport) {
+			this._tableViewport.scrollTop = 0;
+			this._tableViewport.scrollLeft = 0;
+		}
+		if (this._hasFixedHeightViewport()) {
+			return;
+		}
+		if (typeof window === 'undefined' || !this._parent) {
+			return;
+		}
 
 		const targetTop = this._getPaginationScrollTopTarget();
 		const currentTop = window.pageYOffset || window.scrollY || 0;
@@ -3720,11 +3748,24 @@ class VGDynamicTable extends BaseModule {
 		window.scrollTo({
 			top: Math.max(0, Math.round(targetTop)),
 			behavior: prefersReducedMotion ? 'auto' : 'smooth',
-		});
-	}
-
-	_getPaginationScrollTopTarget() {
-		if (this._isPaginationScrollToWindowTopEnabled()) {
+		});
+	}
+
+	_hasFixedHeightViewport() {
+		if (this._tableViewport && this._tableViewport.classList.contains('table-sticky-scroll')) {
+			return true;
+		}
+
+		const offsets = this._getStickyHeaderOffsets();
+		if (offsets.maxHeight > 0) {
+			return true;
+		}
+
+		return this._readCssSizeVar('--vgdt-sticky-max-height', 0) > 0;
+	}
+
+	_getPaginationScrollTopTarget() {
+		if (this._isPaginationScrollToWindowTopEnabled()) {
 			return 0;
 		}
 		const rect = this._parent.getBoundingClientRect();

package/app/modules/vgdynamictable/scss/vgdynamictable.scss

@@ -155,12 +155,14 @@
 	&.table-sticky-head {
 		overflow: visible;
 
-		.vgdt-table-viewport > table {
-			thead th {
-				position: sticky;
-				top: var(--vgdt-sticky-top, 0px);
-				z-index: 3;
-				background: var(--vg-dynamic-table-header-background);
+		.vgdt-table-viewport > table {
+			overflow: visible;
+
+			thead th {
+				position: sticky;
+				top: var(--vgdt-sticky-top, 0px);
+				z-index: 3;
+				background: var(--vg-dynamic-table-header-background);
 				box-shadow: 0 1px 0 var(--vg-dynamic-table-cell-border-color);
 			}
 
@@ -258,10 +260,11 @@
 			overflow: auto;
 		}
 
-		.vgdt-table-viewport > table {
-			margin-top: calc(-1 * var(--vgdt-sticky-clone-height, 0px));
-		}
-	}
+		.vgdt-table-viewport > table {
+			overflow: visible;
+			margin-top: calc(-1 * var(--vgdt-sticky-clone-height, 0px));
+		}
+	}
 
 }