vgapp 1.5.3 → 1.5.5

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

@@ -1,11 +1,12 @@
 /**
  * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
- * Возможности: перенос настоящего thead без клона, автоматическая синхронизация ширин колонок и горизонтальной прокрутки.
+ * Возможности: перенос настоящего thead без клона, intrinsic-минимумы и синхронизация ширин колонок и горизонтальной прокрутки.
  */
 
 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 {
@@ -67,22 +68,39 @@ class _stickyHeader {
 		return this._headerTable || this._element;
 	}
 
-	getBody() {
-		return this._body;
-	}
+	getBody() {
+		return this._body;
+	}
+
+	refreshIntrinsicMinimums() {
+		const widths = this._measureIntrinsicColumnMinimums();
+		this._getHeaders().forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			if (this._hasDeclaredWidth(header) || this._hardColumnWidths.has(key) || !(widths[index] > 0)) return;
+			this._columnMinimumWidths.set(key, Math.max(this._columnMinimumWidths.get(key) || 0, widths[index]));
+		});
+		return this.refresh();
+	}
 
 	syncScroll() {
 		this._syncScroll();
 		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);
@@ -207,6 +225,36 @@ class _stickyHeader {
 		});
 	}
 
+	_measureIntrinsicColumnMinimums() {
+		if (!this._wrapper || !this._head) return [];
+
+		const probe = this._element.cloneNode(true);
+		probe.removeAttribute('data-vg-table');
+		probe.removeAttribute('data-vg-table-sticky-header');
+		probe.setAttribute('aria-hidden', 'true');
+		probe.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]')?.remove();
+		probe.insertBefore(this._head.cloneNode(true), probe.tBodies[0] || null);
+		probe.querySelectorAll('thead th').forEach((header) => header.style.setProperty('white-space', 'nowrap', 'important'));
+		[
+			['position', 'absolute'],
+			['inset', '0 auto auto 0'],
+			['visibility', 'hidden'],
+			['pointer-events', 'none'],
+			['width', 'min-content'],
+			['min-width', '0'],
+			['max-width', 'none'],
+			['table-layout', 'auto'],
+		].forEach(([property, value]) => probe.style.setProperty(property, value, 'important'));
+
+		this._wrapper.append(probe);
+		try {
+			const rows = Array.from(probe.tHead?.rows || []);
+			return this._measureRow(rows.at(-1));
+		} finally {
+			probe.remove();
+		}
+	}
+
 	_rememberColumnGeometry(widths) {
 		const headers = this._getHeaders();
 		const sourceCols = Array.from(this._element.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')?.children || []);
@@ -309,6 +357,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 +417,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?.refreshIntrinsicMinimums?.();
 
 		// Фиксируем настоящие ячейки через native sticky, включая отдельный слой Fixed Header
 		if (!this._complex && !this._fixedColumns && this._params.fixedColumns.enabled === true) {
@@ -1136,7 +1137,7 @@ class VGTable extends BaseModule {
 
 	_refreshColumnsLayout(structure = false) {
 		this._sorting?.refresh?.(structure);
-		this._stickyHeader?.refresh?.();
+		this._stickyHeader?.refreshIntrinsicMinimums?.();
 		this._fixedColumns?.refresh?.();
 	}
 
@@ -1425,11 +1426,11 @@ class VGTable extends BaseModule {
 	_afterRemoteRender(detail = {}) {
 		if (detail.renderedCount > 0) this._states?.clear();
 		this._columns?.refresh?.();
-		this._sorting?.refresh?.();
-		this._expandable?.refresh?.();
-		this._rowReorder?.refresh?.();
-		this._stickyHeader?.refresh?.();
-		this._fixedColumns?.refresh?.();
+		this._sorting?.refresh?.();
+		this._expandable?.refresh?.();
+		this._rowReorder?.refresh?.();
+		this._stickyHeader?.refreshIntrinsicMinimums?.();
+		this._fixedColumns?.refresh?.();
 	}
 
 	/**

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;