vgapp 1.5.7 → 1.5.8

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

@@ -1,12 +1,12 @@
-/**
- * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
- * Возможности: перенос настоящего thead без клона, intrinsic-минимумы и синхронизация ширин колонок и горизонтальной прокрутки.
- */
+/**
+ * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
+ * Возможности: перенос настоящего 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 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 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 {
@@ -19,25 +19,26 @@ class _stickyHeader {
 		this._header = null;
 		this._headerTable = null;
 		this._body = null;
-		this._previousClasses = new Map();
-		this._previousContainerClasses = new Map();
-		this._previousStyles = new Map();
-		this._columnWeights = new Map();
-		this._hardColumnWidths = new Map();
+		this._previousClasses = new Map();
+		this._previousContainerClasses = new Map();
+		this._previousStyles = new Map();
+		this._columnWeights = new Map();
+		this._hardColumnWidths = new Map();
 		this._columnMinimumWidths = new Map();
-		this._hasSourceColgroup = false;
-		this._resizeObserver = null;
-		this._resizeFrame = null;
-		this._boundScroll = this._syncScroll.bind(this);
-		this._boundResize = this._scheduleRefresh.bind(this);
-		this._boundPageScroll = this._syncStickyState.bind(this);
+		this._autoLayoutWidths = null;
+		this._hasSourceColgroup = false;
+		this._resizeObserver = null;
+		this._resizeFrame = null;
+		this._boundScroll = this._syncScroll.bind(this);
+		this._boundResize = this._scheduleRefresh.bind(this);
+		this._boundPageScroll = this._syncStickyState.bind(this);
 	}
 
 	init() {
-		if (!this._wrapper || !this._container || !this._head) return this;
-
-		const widths = this._measureColumns();
-		this._rememberColumnGeometry(widths);
+		if (!this._wrapper || !this._container || !this._head) return this;
+
+		const widths = this._measureColumns();
+		this._rememberColumnGeometry(widths);
 		MODE_CLASSES.forEach((className) => this._previousClasses.set(className, this._wrapper.classList.contains(className)));
 		CONTAINER_MODE_CLASSES.forEach((className) => this._previousContainerClasses.set(className, this._container.classList.contains(className)));
 		STYLE_PROPERTIES.forEach((property) => this._previousStyles.set(property, this._container.style.getPropertyValue(property)));
@@ -50,17 +51,17 @@ class _stickyHeader {
 		this._container.style.setProperty('--vg-table-sticky-max-height', this._toCssLength(this._params.maxHeight, '24rem'));
 		this._element.setAttribute('data-vg-table-sticky-header', this._params.mode);
 
-		this._buildLayers(widths);
-		this._body.addEventListener('scroll', this._boundScroll, {passive: true});
-		if (typeof ResizeObserver !== 'undefined') {
-			this._resizeObserver = new ResizeObserver(this._boundResize);
-			this._resizeObserver.observe(this._container);
-			this._resizeObserver.observe(this._body);
-		} else if (typeof window !== 'undefined') {
-			window.addEventListener('resize', this._boundResize);
-		}
-		if (this._params.mode === 'page' && typeof window !== 'undefined') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
-		this.refresh();
+		this._buildLayers(widths);
+		this._body.addEventListener('scroll', this._boundScroll, {passive: true});
+		if (typeof ResizeObserver !== 'undefined') {
+			this._resizeObserver = new ResizeObserver(this._boundResize);
+			this._resizeObserver.observe(this._container);
+			this._resizeObserver.observe(this._body);
+		} else if (typeof window !== 'undefined') {
+			window.addEventListener('resize', this._boundResize);
+		}
+		if (this._params.mode === 'page' && typeof window !== 'undefined') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
+		this.refresh();
 		return this;
 	}
 
@@ -68,18 +69,47 @@ class _stickyHeader {
 		return this._headerTable || this._element;
 	}
 
-	getBody() {
-		return this._body;
-	}
-
+	getBody() {
+		return this._body;
+	}
+
 	refreshIntrinsicMinimums() {
+		const declaredMinimum = this._previousStyles.get(CONTENT_MIN_WIDTH_PROPERTY);
+		if (declaredMinimum) this._container.style.setProperty(CONTENT_MIN_WIDTH_PROPERTY, declaredMinimum);
+		else this._container.style.removeProperty(CONTENT_MIN_WIDTH_PROPERTY);
+
+		const autoWidths = this._measureAutoLayoutColumns();
 		const widths = this._measureIntrinsicColumnMinimums();
+		const activeKeys = new Set();
 		this._getHeaders().forEach((header, index) => {
 			const key = this._columnKey(header, index);
+			activeKeys.add(key);
 			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]));
+			// AJAX может как расширить, так и сузить обычное содержимое. Пустой th
+			// является служебным заголовком (checkbox/actions) и должен сохранять
+			// уже измеренную по body ширину, иначе колонка схлопнется.
+			const previousMinimum = this._columnMinimumWidths.get(key) || 0;
+			const minimum = this._isEmptyHeader(header)
+				? Math.max(previousMinimum, widths[index])
+				: widths[index];
+			this._columnMinimumWidths.set(key, minimum);
+			this._columnWeights.set(key, this._isEmptyHeader(header)
+				? Math.max(this._columnWeights.get(key) || 0, minimum)
+				: widths[index]);
+		});
+		[this._columnWeights, this._hardColumnWidths, this._columnMinimumWidths].forEach((geometry) => {
+			Array.from(geometry.keys()).forEach((key) => {
+				if (!activeKeys.has(key)) geometry.delete(key);
+			});
 		});
-		return this.refresh();
+		this._autoLayoutWidths = autoWidths.length === this._getHeaders().length && autoWidths.every((width) => width > 0)
+			? autoWidths
+			: null;
+		try {
+			return this.refresh();
+		} finally {
+			this._autoLayoutWidths = null;
+		}
 	}
 
 	syncScroll() {
@@ -87,20 +117,20 @@ class _stickyHeader {
 		return this;
 	}
 
-	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);
+	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);
@@ -110,17 +140,17 @@ class _stickyHeader {
 		return this;
 	}
 
-	dispose() {
-		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
-		this._resizeObserver?.disconnect();
-		if (this._resizeFrame !== null && typeof cancelAnimationFrame === 'function') {
-			cancelAnimationFrame(this._resizeFrame);
-			this._resizeFrame = null;
-		}
-		if (typeof window !== 'undefined') {
-			if (!this._resizeObserver) window.removeEventListener('resize', this._boundResize);
-			window.removeEventListener('scroll', this._boundPageScroll);
-		}
+	dispose() {
+		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
+		this._resizeObserver?.disconnect();
+		if (this._resizeFrame !== null && typeof cancelAnimationFrame === 'function') {
+			cancelAnimationFrame(this._resizeFrame);
+			this._resizeFrame = null;
+		}
+		if (typeof window !== 'undefined') {
+			if (!this._resizeObserver) window.removeEventListener('resize', this._boundResize);
+			window.removeEventListener('scroll', this._boundPageScroll);
+		}
 		this._header?.classList.remove('is-stuck');
 		if (this._head && this._headerTable?.contains(this._head)) this._element.prepend(this._head);
 		this._header?.remove();
@@ -135,25 +165,25 @@ class _stickyHeader {
 		CONTAINER_MODE_CLASSES.forEach((className) => {
 			this._container.classList.toggle(className, this._previousContainerClasses.get(className) === true);
 		});
-		STYLE_PROPERTIES.forEach((property) => {
+		STYLE_PROPERTIES.forEach((property) => {
 			const previous = this._previousStyles.get(property);
 			if (previous) this._container.style.setProperty(property, previous);
 			else this._container.style.removeProperty(property);
-		});
-		this._element.removeAttribute('data-vg-table-sticky-header');
-	}
-
+		});
+		this._element.removeAttribute('data-vg-table-sticky-header');
+	}
+
 	_scheduleRefresh() {
-		if (this._resizeFrame !== null) return;
+		if (this._resizeFrame !== null) return;
 		if (typeof requestAnimationFrame !== 'function') {
-			this.refresh();
-			return;
-		}
+			this.refreshIntrinsicMinimums();
+			return;
+		}
 		this._resizeFrame = requestAnimationFrame(() => {
 			this._resizeFrame = null;
-			this.refresh();
+			this.refreshIntrinsicMinimums();
 		});
-	}
+	}
 
 	_buildLayers(widths) {
 		this._header = this._element.ownerDocument.createElement('div');
@@ -177,24 +207,24 @@ class _stickyHeader {
 		this._body.append(this._element);
 	}
 
-	_measureColumns() {
-		return this._measureBodyColumns();
-	}
-
-	_measureBodyColumns() {
-		const headerRow = this._head?.rows[this._head.rows.length - 1];
-		const headerWidths = this._measureRow(headerRow);
-		const rows = Array.from(this._element.tBodies || []).flatMap((body) => Array.from(body.rows || []));
-		for (const row of rows) {
-			if (row.hidden || row.hasAttribute('data-vg-table-state-row') || row.hasAttribute('data-vg-table-skeleton') || row.hasAttribute('data-vg-table-skeleton-row')) continue;
-			if (row.querySelector('[data-vg-table-state]')) continue;
-			const widths = this._measureRow(row);
-			if (widths.length === headerWidths.length && widths.some((width) => width > 0)) return widths;
-		}
-		return headerWidths;
-	}
+	_measureColumns() {
+		return this._measureBodyColumns();
+	}
 
-	_measureRow(row) {
+	_measureBodyColumns() {
+		const headerRow = this._head?.rows[this._head.rows.length - 1];
+		const headerWidths = this._measureRow(headerRow);
+		const rows = Array.from(this._element.tBodies || []).flatMap((body) => Array.from(body.rows || []));
+		for (const row of rows) {
+			if (row.hidden || row.hasAttribute('data-vg-table-state-row') || row.hasAttribute('data-vg-table-skeleton') || row.hasAttribute('data-vg-table-skeleton-row')) continue;
+			if (row.querySelector('[data-vg-table-state]')) continue;
+			const widths = this._measureRow(row);
+			if (widths.length === headerWidths.length && widths.some((width) => width > 0)) return widths;
+		}
+		return headerWidths;
+	}
+
+	_measureRow(row) {
 		if (!row) return [];
 		return Array.from(row.cells).flatMap((cell) => {
 			const span = Math.max(1, cell.colSpan || 1);
@@ -203,30 +233,62 @@ class _stickyHeader {
 		});
 	}
 
-	_applyColgroup(table, widths) {
-		if (!widths.length) return;
-		if (table.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')) return;
-		let colgroup = table.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]');
+	_applyColgroup(table, widths) {
+		if (!widths.length) return;
+		if (table.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')) return;
+		let colgroup = table.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]');
 		if (!colgroup) {
 			colgroup = table.ownerDocument.createElement('colgroup');
-			colgroup.setAttribute('data-vg-table-sticky-colgroup', '');
-			table.prepend(colgroup);
-		}
-		while (colgroup.children.length < widths.length) colgroup.append(table.ownerDocument.createElement('col'));
-		while (colgroup.children.length > widths.length) colgroup.lastElementChild.remove();
-		const headers = this._getHeaders();
-		widths.forEach((width, index) => {
-			const col = colgroup.children[index];
-			if (width > 0) col.style.width = `${width}px`;
-			else col.style.removeProperty('width');
-			const hidden = headers[index]?.hidden === true;
-			col.hidden = hidden;
-			col.toggleAttribute('data-vg-table-column-hidden', hidden);
-		});
+			colgroup.setAttribute('data-vg-table-sticky-colgroup', '');
+			table.prepend(colgroup);
+		}
+		while (colgroup.children.length < widths.length) colgroup.append(table.ownerDocument.createElement('col'));
+		while (colgroup.children.length > widths.length) colgroup.lastElementChild.remove();
+		const headers = this._getHeaders();
+		widths.forEach((width, index) => {
+			const col = colgroup.children[index];
+			if (width > 0) col.style.width = `${width}px`;
+			else col.style.removeProperty('width');
+			const hidden = headers[index]?.hidden === true;
+			col.hidden = hidden;
+			col.toggleAttribute('data-vg-table-column-hidden', hidden);
+		});
+	}
+
+	_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();
+		}
 	}
 
-	_measureIntrinsicColumnMinimums() {
+	_measureAutoLayoutColumns() {
 		if (!this._wrapper || !this._head) return [];
+		const viewport = this._body?.clientWidth || this._container?.clientWidth || 0;
+		if (!(viewport > 0)) return [];
 
 		const probe = this._element.cloneNode(true);
 		probe.removeAttribute('data-vg-table');
@@ -234,13 +296,12 @@ class _stickyHeader {
 		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'],
+			['width', `${viewport}px`],
 			['min-width', '0'],
 			['max-width', 'none'],
 			['table-layout', 'auto'],
@@ -248,181 +309,189 @@ class _stickyHeader {
 
 		this._wrapper.append(probe);
 		try {
-			const rows = Array.from(probe.tHead?.rows || []);
-			return this._measureRow(rows.at(-1));
+			const headerRow = Array.from(probe.tHead?.rows || []).at(-1);
+			const headerWidths = this._measureRow(headerRow);
+			const row = Array.from(probe.tBodies || [])
+				.flatMap((body) => Array.from(body.rows || []))
+				.find((item) => !item.hidden && !item.hasAttribute('data-vg-table-state-row') && !item.hasAttribute('data-vg-table-skeleton'));
+			const bodyWidths = this._measureRow(row);
+			return bodyWidths.length === headerWidths.length && bodyWidths.some((width) => width > 0)
+				? bodyWidths
+				: headerWidths;
 		} 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 || []);
-		this._hasSourceColgroup = sourceCols.length > 0;
-		headers.forEach((header, index) => {
-			const key = this._columnKey(header, index);
-			this._columnWeights.set(key, widths[index] > 0 ? widths[index] : 1);
-			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(sourceCols[index])) {
-				this._hardColumnWidths.set(key, widths[index] > 0 ? widths[index] : 0);
-			} else if (this._isEmptyHeader(header) && widths[index] > 0) {
-				this._columnMinimumWidths.set(key, widths[index]);
-			}
-		});
-	}
-
+
+	_rememberColumnGeometry(widths) {
+		const headers = this._getHeaders();
+		const sourceCols = Array.from(this._element.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])')?.children || []);
+		this._hasSourceColgroup = sourceCols.length > 0;
+		headers.forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			this._columnWeights.set(key, widths[index] > 0 ? widths[index] : 1);
+			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(sourceCols[index])) {
+				this._hardColumnWidths.set(key, widths[index] > 0 ? widths[index] : 0);
+			} else if (this._isEmptyHeader(header) && widths[index] > 0) {
+				this._columnMinimumWidths.set(key, widths[index]);
+			}
+		});
+	}
+
 	_resolveLayoutWidths() {
 		const headers = this._getHeaders();
+		if (this._autoLayoutWidths?.length === headers.length) return this._autoLayoutWidths.slice();
 		const measured = this._measureBodyColumns();
-		if (this._hasSourceColgroup || !headers.length) return measured;
-
-		const bodyRow = Array.from(this._element.tBodies || [])
-			.flatMap((body) => Array.from(body.rows || []))
-			.find((row) => !row.hidden && !row.hasAttribute('data-vg-table-state-row'));
-		const hard = new Map();
-		const flexible = [];
-		headers.forEach((header, index) => {
-			const key = this._columnKey(header, index);
-			const bodyCell = bodyRow?.cells[index];
-			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(bodyCell) || this._hardColumnWidths.has(key)) {
-				const declared = this._readDeclaredPixelWidth(header) || this._readDeclaredPixelWidth(bodyCell);
-				const width = declared || this._hardColumnWidths.get(key) || measured[index] || 0;
-				this._hardColumnWidths.set(key, width);
-				hard.set(index, width);
-			} else {
-				flexible.push(index);
-			}
-		});
-
-		const measuredTotal = measured.reduce((total, width) => total + width, 0);
-		const viewport = this._body?.clientWidth || this._container?.clientWidth || measuredTotal;
-		const minimum = this._readTableMinimumWidth();
-		const target = Math.max(viewport, minimum, 0);
-		const hardTotal = Array.from(hard.values()).reduce((total, width) => total + width, 0);
-		const available = Math.max(0, target - hardTotal);
-		const widths = Array(headers.length).fill(0);
-		hard.forEach((width, index) => { widths[index] = width; });
-
-		if (!flexible.length) return widths;
-		this._distributeFlexibleWidths(widths, flexible, available, headers, measured);
-		return widths;
-	}
-
-	_distributeFlexibleWidths(widths, indexes, available, headers, measured) {
-		let pending = indexes.slice();
-		let remaining = available;
-		const minimumTotal = pending.reduce((total, index) => {
-			const key = this._columnKey(headers[index], index);
-			return total + (this._columnMinimumWidths.get(key) || 0);
-		}, 0);
-
-		if (minimumTotal > remaining) {
-			pending.forEach((index) => {
-				const key = this._columnKey(headers[index], index);
-				widths[index] = this._columnMinimumWidths.get(key) || 0;
-			});
-			return;
-		}
-
-		while (pending.length) {
-			const weights = pending.map((index) => {
-				const key = this._columnKey(headers[index], index);
-				return this._columnWeights.get(key) || measured[index] || 1;
-			});
-			const weightTotal = weights.reduce((total, weight) => total + weight, 0) || pending.length;
-			const constrained = pending.filter((index, position) => {
-				const key = this._columnKey(headers[index], index);
-				const minimum = this._columnMinimumWidths.get(key) || 0;
-				return minimum > remaining * weights[position] / weightTotal;
-			});
-
-			if (!constrained.length) {
-				let distributed = 0;
-				pending.forEach((index, position) => {
-					const width = position === pending.length - 1
-						? Math.max(0, remaining - distributed)
-						: remaining * weights[position] / weightTotal;
-					widths[index] = width;
-					distributed += width;
-				});
-				return;
-			}
-
-			constrained.forEach((index) => {
-				const key = this._columnKey(headers[index], index);
-				const minimum = this._columnMinimumWidths.get(key) || 0;
-				widths[index] = minimum;
-				remaining -= minimum;
-			});
-			pending = pending.filter((index) => !constrained.includes(index));
-		}
-	}
-
-	_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 || []) : [];
-	}
-
-	_columnKey(header, index) {
-		return String(header?.getAttribute('data-field') || index).trim();
-	}
-
-	_isEmptyHeader(header) {
-		return Boolean(header) && header.childElementCount === 0 && String(header.textContent || '').trim() === '';
-	}
-
-	_hasDeclaredWidth(element) {
-		if (!element) return false;
-		return element.hasAttribute('width')
-			|| element.hasAttribute('data-column-width')
-			|| Boolean(element.style?.width || element.style?.minWidth || element.style?.maxWidth);
-	}
-
-	_readDeclaredPixelWidth(element) {
-		if (!element || !this._hasDeclaredWidth(element)) return 0;
-		const fixed = element.style?.minWidth && element.style.minWidth === element.style.maxWidth
-			? Number.parseFloat(element.style.width || element.style.minWidth)
-			: 0;
-		if (Number.isFinite(fixed) && fixed > 0) return fixed;
-		const measured = element.getBoundingClientRect?.().width || element.offsetWidth || 0;
-		return measured > 0 ? measured : 0;
-	}
-
-	_readTableMinimumWidth() {
-		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);
-	}
-
+		if (this._hasSourceColgroup || !headers.length) return measured;
+
+		const bodyRow = Array.from(this._element.tBodies || [])
+			.flatMap((body) => Array.from(body.rows || []))
+			.find((row) => !row.hidden && !row.hasAttribute('data-vg-table-state-row'));
+		const hard = new Map();
+		const flexible = [];
+		headers.forEach((header, index) => {
+			const key = this._columnKey(header, index);
+			const bodyCell = bodyRow?.cells[index];
+			if (this._hasDeclaredWidth(header) || this._hasDeclaredWidth(bodyCell) || this._hardColumnWidths.has(key)) {
+				const declared = this._readDeclaredPixelWidth(header) || this._readDeclaredPixelWidth(bodyCell);
+				const width = declared || this._hardColumnWidths.get(key) || measured[index] || 0;
+				this._hardColumnWidths.set(key, width);
+				hard.set(index, width);
+			} else {
+				flexible.push(index);
+			}
+		});
+
+		const measuredTotal = measured.reduce((total, width) => total + width, 0);
+		const viewport = this._body?.clientWidth || this._container?.clientWidth || measuredTotal;
+		const minimum = this._readTableMinimumWidth();
+		const target = Math.max(viewport, minimum, 0);
+		const hardTotal = Array.from(hard.values()).reduce((total, width) => total + width, 0);
+		const available = Math.max(0, target - hardTotal);
+		const widths = Array(headers.length).fill(0);
+		hard.forEach((width, index) => { widths[index] = width; });
+
+		if (!flexible.length) return widths;
+		this._distributeFlexibleWidths(widths, flexible, available, headers, measured);
+		return widths;
+	}
+
+	_distributeFlexibleWidths(widths, indexes, available, headers, measured) {
+		let pending = indexes.slice();
+		let remaining = available;
+		const minimumTotal = pending.reduce((total, index) => {
+			const key = this._columnKey(headers[index], index);
+			return total + (this._columnMinimumWidths.get(key) || 0);
+		}, 0);
+
+		if (minimumTotal > remaining) {
+			pending.forEach((index) => {
+				const key = this._columnKey(headers[index], index);
+				widths[index] = this._columnMinimumWidths.get(key) || 0;
+			});
+			return;
+		}
+
+		while (pending.length) {
+			const weights = pending.map((index) => {
+				const key = this._columnKey(headers[index], index);
+				return this._columnWeights.get(key) || measured[index] || 1;
+			});
+			const weightTotal = weights.reduce((total, weight) => total + weight, 0) || pending.length;
+			const constrained = pending.filter((index, position) => {
+				const key = this._columnKey(headers[index], index);
+				const minimum = this._columnMinimumWidths.get(key) || 0;
+				return minimum > remaining * weights[position] / weightTotal;
+			});
+
+			if (!constrained.length) {
+				let distributed = 0;
+				pending.forEach((index, position) => {
+					const width = position === pending.length - 1
+						? Math.max(0, remaining - distributed)
+						: remaining * weights[position] / weightTotal;
+					widths[index] = width;
+					distributed += width;
+				});
+				return;
+			}
+
+			constrained.forEach((index) => {
+				const key = this._columnKey(headers[index], index);
+				const minimum = this._columnMinimumWidths.get(key) || 0;
+				widths[index] = minimum;
+				remaining -= minimum;
+			});
+			pending = pending.filter((index) => !constrained.includes(index));
+		}
+	}
+
+	_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 || []) : [];
+	}
+
+	_columnKey(header, index) {
+		return String(header?.getAttribute('data-field') || index).trim();
+	}
+
+	_isEmptyHeader(header) {
+		return Boolean(header) && header.childElementCount === 0 && String(header.textContent || '').trim() === '';
+	}
+
+	_hasDeclaredWidth(element) {
+		if (!element) return false;
+		return element.hasAttribute('width')
+			|| element.hasAttribute('data-column-width')
+			|| Boolean(element.style?.width || element.style?.minWidth || element.style?.maxWidth);
+	}
+
+	_readDeclaredPixelWidth(element) {
+		if (!element || !this._hasDeclaredWidth(element)) return 0;
+		const fixed = element.style?.minWidth && element.style.minWidth === element.style.maxWidth
+			? Number.parseFloat(element.style.width || element.style.minWidth)
+			: 0;
+		if (Number.isFinite(fixed) && fixed > 0) return fixed;
+		const measured = element.getBoundingClientRect?.().width || element.offsetWidth || 0;
+		return measured > 0 ? measured : 0;
+	}
+
+	_readTableMinimumWidth() {
+		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() {
 		if (this._header && this._body) this._header.scrollLeft = this._body.scrollLeft;
 	}