vgapp 1.5.3 → 1.5.4

package/app/modules/vgtable/js/_sticky-header.js

@@ -5,7 +5,8 @@
 
 const MODE_CLASSES = ['vg-table-wrapper--sticky-container', 'vg-table-wrapper--sticky-page'];
 const CONTAINER_MODE_CLASSES = ['vg-table-container--sticky-container', 'vg-table-container--sticky-page'];
-const STYLE_PROPERTIES = ['--vg-table-sticky-top', '--vg-table-sticky-max-height'];
+const CONTENT_MIN_WIDTH_PROPERTY = '--vg-table-sticky-content-min-width';
+const STYLE_PROPERTIES = ['--vg-table-sticky-top', '--vg-table-sticky-max-height', CONTENT_MIN_WIDTH_PROPERTY];
 const GENERATED_LAYER_ATTRIBUTE = 'data-vg-table-sticky-generated';
 
 class _stickyHeader {
@@ -76,13 +77,20 @@ class _stickyHeader {
 		return this;
 	}
 
-	refresh() {
-		if (!this._header || !this._headerTable || !this._body) return this;
-
-		const widths = this._resolveLayoutWidths();
-		this._applyColgroup(this._headerTable, widths);
-		this._applyColgroup(this._element, widths);
-		const scrollbar = Math.max(0, this._body.offsetWidth - this._body.clientWidth);
+	refresh() {
+		if (!this._header || !this._headerTable || !this._body) return this;
+
+		let widths = this._resolveLayoutWidths();
+		const attempts = this._getHeaders().length + 2;
+		for (let attempt = 0; attempt < attempts; attempt += 1) {
+			this._applyColgroup(this._headerTable, widths);
+			this._applyColgroup(this._element, widths);
+			const headerChanged = this._captureOverflowingHeaderMinimums();
+			const contentChanged = this._syncContentMinimumWidth(widths);
+			if (!headerChanged && !contentChanged) break;
+			widths = this._resolveLayoutWidths();
+		}
+		const scrollbar = Math.max(0, this._body.offsetWidth - this._body.clientWidth);
 		this._header.style.paddingInlineEnd = `${scrollbar}px`;
 		this._header.style.setProperty('--vg-table-sticky-scrollbar-width', `${scrollbar}px`);
 		this._header.classList.toggle('vg-table-header--scrollbar', scrollbar > 0);
@@ -309,6 +317,35 @@ class _stickyHeader {
 		}
 	}
 
+	_captureOverflowingHeaderMinimums() {
+		let changed = false;
+		this._getHeaders().forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			if (this._hasDeclaredWidth(header) || this._hardColumnWidths.has(key)) return;
+
+			const rendered = header.getBoundingClientRect?.().width || header.clientWidth || 0;
+			const required = header.scrollWidth || 0;
+			const current = this._columnMinimumWidths.get(key) || 0;
+			if (required <= rendered + 1 || required <= current + 1) return;
+
+			this._columnMinimumWidths.set(key, required);
+			changed = true;
+		});
+		return changed;
+	}
+
+	_syncContentMinimumWidth(widths) {
+		const total = widths.reduce((sum, width) => sum + width, 0);
+		const viewport = this._body?.clientWidth || this._container?.clientWidth || total;
+		const previous = this._previousStyles.get(CONTENT_MIN_WIDTH_PROPERTY);
+		const required = Math.max(total, this._element?.scrollWidth || 0);
+		const next = required > viewport + 1 ? `${Math.ceil(required)}px` : previous;
+		const current = this._container.style.getPropertyValue(CONTENT_MIN_WIDTH_PROPERTY);
+		if (next) this._container.style.setProperty(CONTENT_MIN_WIDTH_PROPERTY, next);
+		else this._container.style.removeProperty(CONTENT_MIN_WIDTH_PROPERTY);
+		return current !== (next || '');
+	}
+
 	_getHeaders() {
 		const rows = Array.from(this._head?.rows || []);
 		return rows.length ? Array.from(rows.at(-1).cells || []) : [];
@@ -340,9 +377,10 @@ class _stickyHeader {
 	}
 
 	_readTableMinimumWidth() {
-		if (typeof getComputedStyle !== 'function') return 0;
-		const value = Number.parseFloat(getComputedStyle(this._element).minWidth || '0');
-		return Number.isFinite(value) ? value : 0;
+		const generated = Number.parseFloat(this._container?.style.getPropertyValue(CONTENT_MIN_WIDTH_PROPERTY) || '0');
+		if (typeof getComputedStyle !== 'function') return Number.isFinite(generated) ? generated : 0;
+		const declared = Number.parseFloat(getComputedStyle(this._element).minWidth || '0');
+		return Math.max(Number.isFinite(generated) ? generated : 0, Number.isFinite(declared) ? declared : 0);
 	}
 
 	_syncScroll() {

package/app/modules/vgtable/js/vgtable.js

@@ -146,11 +146,12 @@ class VGTable extends BaseModule {
 		if (!this._complex && !this._sorting && this._params.sort.enabled === true && this._params.rowReorder.enabled !== true) {
 			this._sorting = new _sorting(this._element, Object.assign({}, this._params.sort, {remote: this._isRemote}), this._stickyHeader?.getHeaderTable());
 			this._sorting.init();
-			this._element.addEventListener(
-				'sortchange.vg.table',
-				this._isRemote ? this._boundRemoteSortChange : this._boundLocalSortChange
-			);
-		}
+			this._element.addEventListener(
+				'sortchange.vg.table',
+				this._isRemote ? this._boundRemoteSortChange : this._boundLocalSortChange
+			);
+			this._stickyHeader?.refresh?.();
+		}
 
 		// Фиксируем настоящие ячейки через native sticky, включая отдельный слой Fixed Header
 		if (!this._complex && !this._fixedColumns && this._params.fixedColumns.enabled === true) {

package/app/modules/vgtable/scss/_sticky-header.scss

@@ -57,9 +57,9 @@
 
 		.vg-table-header__table,
 		.vg-table-body > .vg-table {
-			width: 100%;
-			min-width: 100%;
-			table-layout: fixed;
+			width: 100%;
+			min-width: max(100%, var(--vg-table-sticky-content-min-width, 0px));
+			table-layout: fixed;
 			overflow: visible;
 			border: 0;
 			border-radius: 0;