vgapp 1.4.7 → 1.4.9

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

@@ -0,0 +1,340 @@
+/**
+ * Описание: локальная и серверная сортировка строк базовой таблицы VGTable.
+ * Возможности: стабильная одиночная и мультисортировка, Shift-режим, remote-события, Fixed Header, клавиатура, приоритеты и подсветка колонок.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+
+const EVENT_SORT_CHANGE = 'sortchange.vg.table';
+const SORTABLE_SELECTOR = 'th';
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, [contenteditable="true"], [data-vg-table-column-resize-handle]';
+
+class _sorting {
+	constructor(table, options = {}, headerTable = table) {
+		this._table = table;
+		this._headerTable = headerTable;
+		this._options = Object.assign({hover: false, multiple: false, multipleWithShift: true}, options);
+		this._headers = [];
+		this._originalRows = new Map();
+		this._sorts = [];
+		this._boundClick = this._handleClick.bind(this);
+		this._boundKeydown = this._handleKeydown.bind(this);
+	}
+
+	init() {
+		this._headers = this._getHeaders();
+		this._rememberOriginalRows();
+		this._table.classList.toggle('vg-table-sort-hover', this._options.hover === true);
+		this._headerTable.classList.toggle('vg-table-sort-hover', this._options.hover === true);
+		this._table.classList.toggle('vg-table-sort-multiple', this._options.multiple === true);
+		this._headerTable.classList.toggle('vg-table-sort-multiple', this._options.multiple === true);
+
+		this._headers.forEach((header) => {
+			if (!this._isSortable(header)) return;
+
+			header.classList.add('vg-table-sortable');
+			header.setAttribute('aria-sort', 'none');
+			this._decorateHeader(header);
+			if (!header.hasAttribute('tabindex')) header.tabIndex = 0;
+		});
+
+		this._headerTable.addEventListener('click', this._boundClick);
+		this._headerTable.addEventListener('keydown', this._boundKeydown);
+	}
+
+	dispose() {
+		this._headerTable.removeEventListener('click', this._boundClick);
+		this._headerTable.removeEventListener('keydown', this._boundKeydown);
+		this._table.classList.remove('vg-table-sort-hover');
+		this._headerTable.classList.remove('vg-table-sort-hover');
+		this._table.classList.remove('vg-table-sort-multiple');
+		this._headerTable.classList.remove('vg-table-sort-multiple');
+
+		this._headers.forEach((header) => {
+			header.classList.remove('vg-table-sortable');
+			header.removeAttribute('aria-sort');
+				header.removeAttribute('data-sort-direction');
+			header.removeAttribute('data-sort-priority');
+			header.querySelector('[data-vg-table-sort-controls]')?.remove();
+		});
+
+		this._sorts = [];
+		this._syncColumnHighlight();
+		this._headers = [];
+		this._originalRows.clear();
+	}
+
+	setSort(column, direction = 'asc', emit = false) {
+		const index = this._resolveColumnIndex(column);
+		return this.setSorts([{columnIndex: index, direction}], emit);
+	}
+
+	setSorts(sorts = [], emit = false) {
+		const normalized = this._normalizeSorts(sorts);
+		if (sorts.length && !normalized.length) return false;
+		this._sorts = this._options.multiple === true ? normalized : normalized.slice(0, 1);
+		this._applySort();
+		this._syncHeaders();
+		if (emit) this._emitChange();
+		return true;
+	}
+
+	getSort() {
+		const sort = this._sorts[0];
+		if (!sort) return null;
+		const header = this._headers[sort.index];
+		return {
+			columnIndex: sort.index,
+			field: header ? String(header.getAttribute('data-field') || '').trim() : '',
+			direction: sort.direction,
+		};
+	}
+
+	getSorts() {
+		return this._sorts.map((sort) => {
+			const header = this._headers[sort.index];
+			return {
+				columnIndex: sort.index,
+				field: header ? String(header.getAttribute('data-field') || '').trim() : '',
+				direction: sort.direction,
+			};
+		});
+	}
+
+	getSortState() {
+		const sort = this.getSort();
+		return sort ? Object.assign({}, sort, {sorts: this.getSorts()}) : null;
+	}
+
+	refresh(structure = false) {
+		if (structure) {
+			const sorts = this.getSorts();
+			this._headers = this._getHeaders();
+			this._headers.forEach((header) => {
+				if (!this._isSortable(header)) return;
+				header.classList.add('vg-table-sortable');
+				if (!header.hasAttribute('aria-sort')) header.setAttribute('aria-sort', 'none');
+				this._decorateHeader(header);
+				if (!header.hasAttribute('tabindex')) header.tabIndex = 0;
+			});
+			this.setSorts(sorts, false);
+		} else {
+			this._syncColumnHighlight();
+		}
+		return this.getSort();
+	}
+
+	clearSort(emit = false) {
+		this._sorts = [];
+		if (this._options.remote !== true) this._restoreOriginalRows();
+		this._syncHeaders();
+		if (emit) this._emitChange();
+	}
+
+	_getHeaders() {
+		const head = this._headerTable.tHead || this._headerTable.querySelector('thead');
+		if (!head || !head.rows.length) return [];
+		return Array.from(head.rows[head.rows.length - 1].querySelectorAll(SORTABLE_SELECTOR));
+	}
+
+	_isSortable(header) {
+		return String(header.getAttribute('data-sort-enabled') || '').toLowerCase() !== 'false';
+	}
+
+	_rememberOriginalRows() {
+		Array.from(this._table.tBodies || []).forEach((body) => {
+			this._originalRows.set(body, Array.from(body.rows));
+		});
+	}
+
+	_restoreOriginalRows() {
+		this._originalRows.forEach((rows, body) => {
+			rows.forEach((row) => body.append(row));
+		});
+	}
+
+	_handleClick(event) {
+		if (event.target.closest(INTERACTIVE_SELECTOR)) return;
+
+		const header = event.target.closest(SORTABLE_SELECTOR);
+		if (!header || !this._headers.includes(header) || !this._isSortable(header)) return;
+		this._cycleSort(this._headers.indexOf(header), this._isMultipleMode(event));
+	}
+
+	_handleKeydown(event) {
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		if (event.target.closest(INTERACTIVE_SELECTOR)) return;
+
+		const header = event.target.closest(SORTABLE_SELECTOR);
+		if (!header || !this._headers.includes(header) || !this._isSortable(header)) return;
+
+		event.preventDefault();
+		this._cycleSort(this._headers.indexOf(header), this._isMultipleMode(event));
+	}
+
+	_isMultipleMode(event) {
+		if (this._options.multiple !== true) return false;
+		return this._options.multipleWithShift === false || event?.shiftKey === true;
+	}
+
+	_cycleSort(index, multipleMode = false) {
+		const current = this._sorts.find((sort) => sort.index === index);
+		if (!current) {
+			this._setColumnSort(index, 'asc', multipleMode);
+			return;
+		}
+		if (current.direction === 'asc') {
+			this._setColumnSort(index, 'desc', multipleMode);
+			return;
+		}
+		const next = multipleMode
+			? this._sorts.filter((sort) => sort.index !== index)
+			: [];
+		this.setSorts(next, true);
+	}
+
+	_setColumnSort(index, direction, multipleMode) {
+		const next = multipleMode ? this._sorts.slice() : [];
+		const currentIndex = next.findIndex((sort) => sort.index === index);
+		const item = {columnIndex: index, direction};
+		if (currentIndex >= 0) next.splice(currentIndex, 1, item);
+		else next.push(item);
+		this.setSorts(next, true);
+	}
+
+	_applySort() {
+		if (this._options.remote === true || !this._sorts.length) return;
+
+		this._originalRows.forEach((originalRows, body) => {
+			const originalIndex = new Map(originalRows.map((row, rowIndex) => [row, rowIndex]));
+			const rows = Array.from(body.rows);
+			rows.sort((leftRow, rightRow) => {
+				for (const sort of this._sorts) {
+					const header = this._headers[sort.index];
+					const type = String(header?.getAttribute('data-sort-type') || 'auto').toLowerCase();
+					const result = this._compareCells(leftRow.cells[sort.index], rightRow.cells[sort.index], type);
+					if (result !== 0) return sort.direction === 'desc' ? -result : result;
+				}
+				return (originalIndex.get(leftRow) ?? 0) - (originalIndex.get(rightRow) ?? 0);
+			});
+			rows.forEach((row) => body.append(row));
+		});
+	}
+
+	_compareCells(leftCell, rightCell, type) {
+		const left = this._getCellValue(leftCell);
+		const right = this._getCellValue(rightCell);
+
+		if (type === 'number' || (type === 'auto' && this._isNumeric(left) && this._isNumeric(right))) {
+			return this._toNumber(left) - this._toNumber(right);
+		}
+
+		if (type === 'date') {
+			const leftTime = Date.parse(left);
+			const rightTime = Date.parse(right);
+			if (!Number.isNaN(leftTime) && !Number.isNaN(rightTime)) return leftTime - rightTime;
+		}
+
+		return left.localeCompare(right, undefined, {numeric: true, sensitivity: 'base'});
+	}
+
+	_getCellValue(cell) {
+		if (!cell) return '';
+		return String(cell.getAttribute('data-sort-value') ?? cell.textContent ?? '').trim();
+	}
+
+	_isNumeric(value) {
+		return value !== '' && Number.isFinite(this._toNumber(value));
+	}
+
+	_toNumber(value) {
+		return Number(String(value).replace(/\s/g, '').replace(',', '.'));
+	}
+
+	_decorateHeader(header) {
+		if (header.querySelector('[data-vg-table-sort-controls]')) return;
+
+		const controls = document.createElement('span');
+		controls.className = 'vg-table-sort-controls';
+		controls.setAttribute('data-vg-table-sort-controls', '');
+		controls.setAttribute('aria-hidden', 'true');
+		controls.innerHTML = `
+			<span class="vg-table-sort-priority" data-vg-table-sort-priority hidden></span>
+			<span class="vg-table-sort-chevron vg-table-sort-chevron-asc"></span>
+			<span class="vg-table-sort-chevron vg-table-sort-chevron-desc"></span>
+		`;
+		header.append(controls);
+	}
+
+	_syncHeaders() {
+		this._headers.forEach((header, index) => {
+			const priority = this._sorts.findIndex((sort) => sort.index === index);
+			const direction = priority >= 0 ? this._sorts[priority].direction : null;
+			const priorityNode = header.querySelector('[data-vg-table-sort-priority]');
+			header.setAttribute('aria-sort', direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none');
+			if (direction) {
+				header.setAttribute('data-sort-direction', direction);
+				header.setAttribute('data-sort-priority', String(priority + 1));
+				if (priorityNode) {
+					priorityNode.textContent = String(priority + 1);
+					priorityNode.hidden = this._sorts.length < 2;
+				}
+			} else {
+				header.removeAttribute('data-sort-direction');
+				header.removeAttribute('data-sort-priority');
+				if (priorityNode) priorityNode.hidden = true;
+			}
+		});
+		this._syncColumnHighlight();
+	}
+
+	_syncColumnHighlight() {
+		const rows = [...Array.from(this._headerTable.rows || []), ...Array.from(this._table.rows || [])]
+			.filter((row) => !row.hasAttribute('data-vg-table-state-row'));
+		rows.forEach((row) => {
+			Array.from(row.cells || []).forEach((cell) => {
+				cell.removeAttribute('data-sorted-column');
+				cell.removeAttribute('data-sorted-priority');
+			});
+		});
+
+		this._sorts.forEach((sort, priority) => rows.forEach((row) => {
+			const cell = row.cells[sort.index];
+			if (cell) {
+				cell.setAttribute('data-sorted-column', '1');
+				cell.setAttribute('data-sorted-priority', String(priority + 1));
+			}
+		}));
+	}
+
+	_normalizeSorts(sorts) {
+		const result = [];
+		const seen = new Set();
+		(Array.isArray(sorts) ? sorts : []).forEach((sort) => {
+			const column = sort?.field ?? sort?.columnIndex ?? sort?.index;
+			const index = this._resolveColumnIndex(column);
+			if (index < 0 || seen.has(index) || !this._isSortable(this._headers[index])) return;
+			seen.add(index);
+			result.push({
+				index,
+				direction: String(sort?.direction ?? sort?.dir ?? 'asc').toLowerCase() === 'desc' ? 'desc' : 'asc',
+			});
+		});
+		return result;
+	}
+
+	_emitChange() {
+		EventHandler.trigger(this._table, EVENT_SORT_CHANGE, {sort: this.getSort(), sorts: this.getSorts()});
+	}
+
+	_resolveColumnIndex(column) {
+		if (typeof column === 'string') {
+			return this._headers.findIndex((header) => String(header.getAttribute('data-field') || '').trim() === column.trim());
+		}
+
+		const index = Number.parseInt(column, 10);
+		return Number.isInteger(index) ? index : -1;
+	}
+}
+
+export default _sorting;

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

@@ -0,0 +1,143 @@
+/**
+ * Описание: единый визуальный слой состояний VGTable.
+ * Возможности: empty, filtered-empty и error, действия retry/reset, live-region и публичное состояние.
+ */
+import EventHandler from "../../../utils/js/dom/event";
+
+
+const EVENT_CHANGE = 'statechange.vg.table';
+const STATE_ROW_ATTRIBUTE = 'data-vg-table-state-row';
+
+class _states {
+	constructor(table, wrapper, options = {}, hooks = {}) {
+		this._table = table;
+		this._wrapper = wrapper;
+		this._options = options;
+		this._hooks = hooks;
+		this._state = null;
+		this._boundClick = this._handleClick.bind(this);
+	}
+
+	init() {
+		this._table.addEventListener('click', this._boundClick);
+		return this;
+	}
+
+	dispose() {
+		this._table.removeEventListener('click', this._boundClick);
+		this.clear(false);
+	}
+
+	render(type, message = '') {
+		if (this._options.enabled === false) return null;
+		const normalized = ['empty', 'filtered-empty', 'error'].includes(String(type)) ? String(type) : 'empty';
+		this._removeRow();
+		const row = this._table.ownerDocument.createElement('tr');
+		row.setAttribute(STATE_ROW_ATTRIBUTE, '');
+		const cell = this._table.ownerDocument.createElement('td');
+		cell.colSpan = this._columns();
+		cell.setAttribute('data-vg-table-state', normalized);
+		cell.setAttribute('role', normalized === 'error' ? 'alert' : 'status');
+		const content = this._table.ownerDocument.createElement('div');
+		content.className = 'vg-table-state';
+		const icon = this._table.ownerDocument.createElement('span');
+		icon.className = `vg-table-state__icon vg-table-state__icon--${normalized}`;
+		icon.setAttribute('aria-hidden', 'true');
+		const text = this._table.ownerDocument.createElement('span');
+		text.className = 'vg-table-state__text';
+		text.textContent = message || this._label(normalized);
+		content.append(icon, text);
+		const actions = this._actions(normalized);
+		if (actions) content.append(actions);
+		cell.append(content);
+		row.append(cell);
+		if (this._hooks.remote === true) this._body().replaceChildren(row);
+		else this._body().append(row);
+		this._state = {type: normalized, message: text.textContent};
+		this._wrapper?.setAttribute('data-vg-table-state', normalized);
+		EventHandler.trigger(this._table, EVENT_CHANGE, this.getState());
+		return this.getState();
+	}
+
+	clear(emit = true) {
+		const previous = this._state;
+		this._removeRow();
+		this._state = null;
+		this._wrapper?.removeAttribute('data-vg-table-state');
+		if (emit && previous) EventHandler.trigger(this._table, EVENT_CHANGE, {type: null, previous});
+		return previous;
+	}
+
+	syncLocal(activeQuery = false) {
+		const rows = this._dataRows();
+		if (!rows.length) return this.render('empty');
+		const matched = rows.filter((row) => !row.hasAttribute('data-vg-table-filter-hidden'));
+		if (activeQuery && !matched.length) return this.render('filtered-empty');
+		this.clear();
+		return null;
+	}
+
+	getState() {
+		return this._state ? Object.assign({}, this._state) : null;
+	}
+
+	_actions(type) {
+		if (type !== 'error' && type !== 'filtered-empty') return null;
+		const actions = this._table.ownerDocument.createElement('span');
+		actions.className = 'vg-table-state__actions';
+		const button = this._table.ownerDocument.createElement('button');
+		button.type = 'button';
+		button.className = 'vg-table-state__action';
+		if (type === 'error') {
+			button.setAttribute('data-vg-table-retry', '');
+			button.textContent = this._label('retry');
+		} else {
+			button.setAttribute('data-vg-table-state-reset', '');
+			button.textContent = this._label('reset');
+		}
+		actions.append(button);
+		return actions;
+	}
+
+	_handleClick(event) {
+		const reset = event.target.closest('[data-vg-table-state-reset]');
+		if (!reset) return;
+		event.preventDefault();
+		this._hooks.reset?.();
+	}
+
+	_label(key) {
+		const labels = this._options.labels || {};
+		const fallbacks = {
+			empty: 'Нет данных',
+			'filtered-empty': 'По вашему запросу ничего не найдено',
+			error: 'Не удалось загрузить данные',
+			retry: 'Повторить',
+			reset: 'Сбросить фильтры',
+		};
+		return String(labels[key] || fallbacks[key] || '');
+	}
+
+	_columns() {
+		const headerTable = this._hooks.getHeaderTable?.() || this._table;
+		const rows = Array.from(headerTable.tHead?.rows || []);
+		return Math.max(1, rows.length ? rows.at(-1).cells.length : 1);
+	}
+
+	_dataRows() {
+		return Array.from(this._table.tBodies || [])
+			.flatMap((body) => Array.from(body.rows || []))
+			.filter((row) => !row.hasAttribute(STATE_ROW_ATTRIBUTE));
+	}
+
+	_removeRow() {
+		this._body().querySelector(`[${STATE_ROW_ATTRIBUTE}]`)?.remove();
+	}
+
+	_body() {
+		return this._table.tBodies[0] || this._table.createTBody();
+	}
+}
+
+export {STATE_ROW_ATTRIBUTE};
+export default _states;

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

@@ -0,0 +1,193 @@
+/**
+ * Описание: разметка Fixed Header с отдельными слоями заголовка и тела VGTable.
+ * Возможности: перенос настоящего thead без клона, синхронизация колонок и горизонтальной прокрутки.
+ */
+
+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 GENERATED_LAYER_ATTRIBUTE = 'data-vg-table-sticky-generated';
+
+class _stickyHeader {
+	constructor(element, wrapper, container, params = {}) {
+		this._element = element;
+		this._wrapper = wrapper;
+		this._container = container;
+		this._params = params;
+		this._head = element.tHead;
+		this._header = null;
+		this._headerTable = null;
+		this._body = null;
+		this._previousClasses = new Map();
+		this._previousContainerClasses = new Map();
+		this._previousStyles = new Map();
+		this._boundScroll = this._syncScroll.bind(this);
+		this._boundResize = this.refresh.bind(this);
+		this._boundPageScroll = this._syncStickyState.bind(this);
+	}
+
+	init() {
+		if (!this._wrapper || !this._container || !this._head) return this;
+
+		const widths = this._measureColumns();
+		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)));
+
+		this._wrapper.classList.add(`vg-table-wrapper--sticky-${this._params.mode}`);
+		this._container.classList.add(`vg-table-container--sticky-${this._params.mode}`);
+		if (this._params.top !== null && String(this._params.top).trim() !== '') {
+			this._container.style.setProperty('--vg-table-sticky-top', this._toCssLength(this._params.top, '0px'));
+		}
+		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 window !== 'undefined') {
+			window.addEventListener('resize', this._boundResize);
+			if (this._params.mode === 'page') window.addEventListener('scroll', this._boundPageScroll, {passive: true});
+		}
+		this.refresh();
+		return this;
+	}
+
+	getHeaderTable() {
+		return this._headerTable || this._element;
+	}
+
+	getBody() {
+		return this._body;
+	}
+
+	syncScroll() {
+		this._syncScroll();
+		return this;
+	}
+
+	refresh() {
+		if (!this._header || !this._headerTable || !this._body) return this;
+
+		const widths = this._measureBodyColumns();
+		this._applyColgroup(this._headerTable, widths);
+		this._applyColgroup(this._element, widths);
+		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);
+		this._container.classList.toggle('vg-table-container--scrollbar', scrollbar > 0);
+		this._syncScroll();
+		this._syncStickyState();
+		return this;
+	}
+
+	dispose() {
+		if (this._body) this._body.removeEventListener('scroll', this._boundScroll);
+		if (typeof window !== 'undefined') {
+			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();
+		this._container?.classList.remove('vg-table-container--scrollbar');
+		if (this._body?.contains(this._element)) this._body.before(this._element);
+		this._body?.remove();
+		this._element.querySelector(':scope > colgroup[data-vg-table-sticky-colgroup]')?.remove();
+
+		MODE_CLASSES.forEach((className) => {
+			this._wrapper.classList.toggle(className, this._previousClasses.get(className) === true);
+		});
+		CONTAINER_MODE_CLASSES.forEach((className) => {
+			this._container.classList.toggle(className, this._previousContainerClasses.get(className) === true);
+		});
+		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');
+	}
+
+	_buildLayers(widths) {
+		this._header = this._element.ownerDocument.createElement('div');
+		this._header.className = 'vg-table-header';
+		this._header.setAttribute(GENERATED_LAYER_ATTRIBUTE, '');
+		this._headerTable = this._element.ownerDocument.createElement('table');
+		this._headerTable.className = `${this._element.className} vg-table-header__table`;
+		this._headerTable.style.cssText = this._element.style.cssText;
+		this._headerTable.removeAttribute('data-vg-table');
+		const sourceColgroup = this._element.querySelector(':scope > colgroup:not([data-vg-table-sticky-colgroup])');
+		if (sourceColgroup) this._headerTable.append(sourceColgroup.cloneNode(true));
+		else this._applyColgroup(this._headerTable, widths);
+		this._headerTable.append(this._head);
+		this._header.append(this._headerTable);
+
+		this._body = this._element.ownerDocument.createElement('div');
+		this._body.className = 'vg-table-body';
+		this._body.setAttribute(GENERATED_LAYER_ATTRIBUTE, '');
+		this._applyColgroup(this._element, widths);
+		this._element.before(this._header, this._body);
+		this._body.append(this._element);
+	}
+
+	_measureColumns() {
+		const row = this._element.tBodies[0]?.rows[0] || this._head.rows[this._head.rows.length - 1];
+		return this._measureRow(row);
+	}
+
+	_measureBodyColumns() {
+		const row = this._element.tBodies[0]?.rows[0];
+		const widths = this._measureRow(row);
+		return widths.some((width) => width > 0) ? widths : this._measureRow(this._head.rows[this._head.rows.length - 1]);
+	}
+
+	_measureRow(row) {
+		if (!row) return [];
+		return Array.from(row.cells).flatMap((cell) => {
+			const span = Math.max(1, cell.colSpan || 1);
+			const width = cell.getBoundingClientRect().width / span;
+			return Array.from({length: span}, () => width);
+		});
+	}
+
+	_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);
+		}
+		colgroup.replaceChildren(...widths.map((width) => {
+			const col = table.ownerDocument.createElement('col');
+			if (width > 0) col.style.width = `${width}px`;
+			return col;
+		}));
+	}
+
+	_syncScroll() {
+		if (this._header && this._body) this._header.scrollLeft = this._body.scrollLeft;
+	}
+
+	_syncStickyState() {
+		if (!this._header || this._params.mode !== 'page') return;
+		const headerRect = this._header.getBoundingClientRect();
+		const containerRect = this._container.getBoundingClientRect();
+		const top = Number.parseFloat(window.getComputedStyle(this._header).top) || 0;
+		const atStickyTop = Math.abs(headerRect.top - top) <= 1;
+		const insideContainer = containerRect.top < top && containerRect.bottom > top + headerRect.height;
+		this._header.classList.toggle('is-stuck', atStickyTop && insideContainer);
+	}
+
+	_toCssLength(value, fallback) {
+		if (typeof value === 'number' && Number.isFinite(value)) return `${Math.max(0, value)}px`;
+		const normalized = String(value ?? '').trim();
+		if (!normalized) return fallback;
+		if (/^\d+(?:\.\d+)?$/.test(normalized)) return `${normalized}px`;
+		return normalized;
+	}
+}
+
+export default _stickyHeader;