@knime/kds-table 6.8.1 → 6.9.0

package/dist/index.js

@@ -1301,6 +1301,29 @@ var spacing = {
 		}
 	} }
 };
+//#endregion
+//#region src/constants.ts
+var HEADER_HORIZONTAL_PADDING = spacing.container["0.5x"].value + spacing.container["0.37x"].value;
+var HEADER_ACTION_BUTTON_GAP = spacing.container["0.12x"].value;
+var HEADER_ACTION_BUTTON_WIDTH = dimension.component.width["1.5x"].value;
+var DELETE_COLUMN_BUTTON_WIDTH = dimension.component.width["2x"].value;
+/**
+* The min-width of a column whose header shows the given action buttons, i.e.
+* the width at which its name has truncated away entirely but the buttons
+* still fit. Never below {@link MIN_COLUMN_SIZE}. Enforced on the column size
+* shared with the row cells rather than as a header-only CSS min-width, which
+* would desync the header cell's width from its column's and shift later
+* columns out of alignment.
+*/
+var minColumnSize = ({ menuButton = false, sortButton = false, deleteButton = false }) => {
+	const buttonWidths = [
+		...menuButton ? [HEADER_ACTION_BUTTON_WIDTH] : [],
+		...sortButton ? [HEADER_ACTION_BUTTON_WIDTH] : [],
+		...deleteButton ? [DELETE_COLUMN_BUTTON_WIDTH] : []
+	];
+	const gaps = Math.max(buttonWidths.length - 1, 0) * HEADER_ACTION_BUTTON_GAP;
+	return Math.max(50, HEADER_HORIZONTAL_PADDING + buttonWidths.reduce((total, width) => total + width, 0) + gaps);
+};
 var SPECIAL_COLUMNS_SIZE = dimension.component.width["2x"].value;
 var ROW_BORDER_BOTTOM_WIDTH = border.base.subtle.width.value;
 var DEFAULT_ROW_HEIGHT = dimension.component.height["2.5x"].value + ROW_BORDER_BOTTOM_WIDTH;
@@ -5519,46 +5542,20 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	}
 }), [["__scopeId", "data-v-206732ac"]]);
 //#endregion
-//#region src/components/composables/useHeaderMenuItems.ts
-var useHeaderMenuItems = ({ enableSorting, sortDirection, sortTexts, additionalMenuItems, onColumnSort }) => {
-	const staticItems = [];
-	if (enableSorting) staticItems.push({
-		id: "table-header-sort",
-		text: "Sort this column",
-		accessory: {
-			type: "icon",
-			name: "sort-ascending"
-		},
-		children: [
-			{
-				id: "sort-asc",
-				text: sortTexts.ascending,
-				handler: (_item, _event) => {
-					onColumnSort(1);
-				},
-				trailingIcon: sortDirection === 1 ? "checkmark" : void 0
-			},
-			{
-				id: "sort-desc",
-				text: sortTexts.descending,
-				handler: (_item, _event) => {
-					onColumnSort(-1);
-				},
-				trailingIcon: sortDirection === -1 ? "checkmark" : void 0
-			},
-			{
-				id: "sort-none",
-				text: "No sorting",
-				handler: (_item, _event) => {
-					onColumnSort(0);
-				},
-				trailingIcon: sortDirection === 0 ? "checkmark" : void 0
-			}
-		]
-	});
-	const menuItems = [...staticItems, ...additionalMenuItems ?? []];
-	return menuItems.length ? menuItems : void 0;
-};
+//#region src/utils/columnHeaderActionButtons.ts
+/**
+* Which action buttons the header of the given column shows. Mirrors the
+* conditions HeaderCell.vue renders them under, for the places that need to
+* know a column's buttons without rendering its header — namely the minimum
+* width the column needs (see {@link minColumnSize}).
+*/
+var columnHeaderActionButtons = ({ column, actionConfig, additionalMenuItems }) => ({
+	menuButton: Boolean(additionalMenuItems?.length),
+	sortButton: Boolean(actionConfig?.enableSorting) && !column.isNotSortable,
+	deleteButton: Boolean(column.deletable)
+});
+/** The minimum width the given column needs for its header action buttons. */
+var minSizeOfColumn = (params) => minColumnSize(columnHeaderActionButtons(params));
 //#endregion
 //#region ../../node_modules/.pnpm/@vueuse+shared@14.3.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/shared/dist/index.js
 /**
@@ -5700,8 +5697,8 @@ var _hoisted_3 = {
 	class: "sub-header-text-container"
 };
 var _hoisted_4 = {
-	key: 0,
-	class: "delete-column-button"
+	key: 2,
+	class: "header-action-button delete-column-button"
 };
 var columnMenuButtonRef = "columnMenuButton";
 //#endregion
@@ -5767,13 +5764,27 @@ var Header_vue_vue_type_script_lang_default = {
 				const mainHeader = useTemplateRef("mainHeader");
 				const headerText = useTemplateRef("headerText");
 				const columnDeleteButton = useTemplateRef("columnDeleteButton");
+				const sortButton = useTemplateRef("sortButton");
 				const columnMenuButton = useTemplateRef(columnMenuButtonRef);
-				const subMenuItems = computed(() => useHeaderMenuItems({
-					enableSorting: Boolean(props.actionConfig.enableSorting) && !props.column.isNotSortable,
-					sortDirection: props.sortDirection,
-					sortTexts: columnSortText[props.column.type ?? "default"],
-					additionalMenuItems: props.additionalMenuItems,
-					onColumnSort: (direction) => emit("onColumnSort", direction)
+				/**
+				* Every sortable column of a table with sorting enabled offers the sort button;
+				* there is no separate opt-in for it.
+				*/
+				const showSortButton = computed(() => Boolean(props.actionConfig.enableSorting) && !props.column.isNotSortable);
+				const isSorted = computed(() => props.sortDirection !== 0);
+				const SORT_NEXT_DIRECTION = {
+					0: 1,
+					1: -1,
+					[-1]: 0
+				};
+				/** Cycles unsorted -> ascending -> descending -> unsorted on each click. */
+				const sortNextDirection = computed(() => SORT_NEXT_DIRECTION[props.sortDirection]);
+				const onSortToggle = () => emit("onColumnSort", sortNextDirection.value);
+				/** The width below which this header's action buttons would not fit. */
+				const minSize = computed(() => minColumnSize({
+					menuButton: Boolean(props.additionalMenuItems?.length),
+					sortButton: showSortButton.value,
+					deleteButton: Boolean(props.column.deletable)
 				}));
 				const resizeHandleHovered = ref(false);
 				const headerHovered = ref(false);
@@ -5800,7 +5811,7 @@ var Header_vue_vue_type_script_lang_default = {
 				const emitColumnResize = () => {
 					if (!dragging.value) return;
 					const newColumnSize = columnSizeOnDragStart + (currentPageX - pageXOnDragStart) + autoScrollOffset.value;
-					emit("columnResize", Math.max(newColumnSize, 50));
+					emit("columnResize", Math.max(newColumnSize, minSize.value));
 				};
 				const { onPointerDown: startAutoScroll, onPointerMove: updateAutoScroll, onPointerUp: stopAutoScroll } = useAutoScrollOnRightEdge({
 					scrollContainer,
@@ -5816,7 +5827,7 @@ var Header_vue_vue_type_script_lang_default = {
 					event.target.setPointerCapture(event.pointerId);
 					dragging.value = true;
 					currentDragHandlerHeight = props.getDragHandleHeight();
-					columnSizeOnDragStart = colSizes.value[props.index] ?? 50;
+					columnSizeOnDragStart = colSizes.value[props.index] ?? minSize.value;
 					pageXOnDragStart = event.pageX;
 					currentPageX = event.pageX;
 					emit("columnResizeStart");
@@ -5826,7 +5837,7 @@ var Header_vue_vue_type_script_lang_default = {
 					emit("columnResizeEnd");
 					if (event.shiftKey) {
 						const newColumnSize = columnSizeOnDragStart + event.pageX - pageXOnDragStart + autoScrollOffset.value;
-						emit("allColumnsResize", Math.max(newColumnSize, 50));
+						emit("allColumnsResize", newColumnSize);
 					}
 					stopAutoScroll();
 				};
@@ -5855,15 +5866,18 @@ var Header_vue_vue_type_script_lang_default = {
 				};
 				const focus = () => {
 					if (props.tableConfig.enableHeaderCellSelection || props.column.editable) content.value?.focus();
-					else if (subMenuItems.value?.length) {
+					else if (props.additionalMenuItems?.length) {
 						nativeFocusInsideHeader.value = true;
 						columnMenuButton.value?.menuButtonEl?.$el?.focus();
 					} else if (props.column.deletable) columnDeleteButton.value?.$el?.focus();
+					else if (showSortButton.value) sortButton.value?.$el?.focus();
 				};
-				const isFocusable = () => Boolean(props.tableConfig.enableHeaderCellSelection || props.column.editable || subMenuItems.value?.length || props.column.deletable);
+				const isFocusable = () => Boolean(props.tableConfig.enableHeaderCellSelection || props.column.editable || props.additionalMenuItems?.length || props.column.deletable || showSortButton.value);
 				const showMenuButton = computed(() => {
-					return subMenuItems.value?.length && (headerHovered.value || menuOpen.value || nativeFocusInsideHeader.value) && !dragging.value;
+					return props.additionalMenuItems?.length && (headerHovered.value || menuOpen.value || nativeFocusInsideHeader.value) && !dragging.value;
 				});
+				/** Visible on hover/focus like the menu button, and while the column is sorted. */
+				const sortButtonVisible = computed(() => (headerHovered.value || nativeFocusInsideHeader.value || isSorted.value) && !dragging.value);
 				__expose({
 					getHeaderCellWidth,
 					focus,
@@ -5882,15 +5896,15 @@ var Header_vue_vue_type_script_lang_default = {
 							"colored-header": __props.column.headerColor,
 							"header-focused": __props.focused || __props.selected
 						}]),
-						onPointerenter: _cache[19] || (_cache[19] = ($event) => headerHovered.value = true),
-						onPointerleave: _cache[20] || (_cache[20] = ($event) => headerHovered.value = false),
+						onPointerenter: _cache[20] || (_cache[20] = ($event) => headerHovered.value = true),
+						onPointerleave: _cache[21] || (_cache[21] = ($event) => headerHovered.value = false),
 						onFocusin: onThFocusIn,
 						onFocusout: onThFocusOut
 					}, [
 						createElementVNode("div", {
 							ref_key: "content",
 							ref: content,
-							class: normalizeClass(["column-header-content", [{ "with-button-in-header": showMenuButton.value || __props.column.deletable }]]),
+							class: normalizeClass(["column-header-content", { "with-button-in-header": showMenuButton.value || __props.column.deletable || sortButtonVisible.value }]),
 							tabindex: __props.tableConfig.enableHeaderCellSelection || __props.column.editable ? 0 : -1,
 							onFocus: _cache[0] || (_cache[0] = ($event) => emit("onHeaderCellFocus")),
 							onBlur: _cache[1] || (_cache[1] = ($event) => emit("onHeaderCellBlur")),
@@ -5915,48 +5929,71 @@ var Header_vue_vue_type_script_lang_default = {
 							__props.column.header,
 							"truncated"
 						]])], 512), __props.column.subHeader ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "subHeader", { subHeader: __props.column.subHeader }, () => [createTextVNode(toDisplayString(__props.column.subHeader), 1)], true)])) : createCommentVNode("", true)], 42, _hoisted_1$5),
-						__props.column.deletable ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(KdsButton), {
-							ref_key: "columnDeleteButton",
-							ref: columnDeleteButton,
-							variant: "transparent",
-							"leading-icon": "trash",
-							size: "small",
-							ariaLabel: "Delete column",
-							onClick: _cache[9] || (_cache[9] = withModifiers(($event) => emit("onDeleteColumn"), ["stop"])),
-							onKeydown: _cache[10] || (_cache[10] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
-						}, null, 512)])) : createCommentVNode("", true),
-						subMenuItems.value?.length ? (openBlock(), createElementBlock("div", {
-							key: 1,
-							class: normalizeClass({ "menu-button-hidden": !showMenuButton.value })
+						__props.additionalMenuItems?.length ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass([
+								"header-action-button",
+								"menu-button",
+								{ "action-button-hidden": !showMenuButton.value }
+							])
 						}, [createVNode(unref(KdsMenuButton), {
 							ref: columnMenuButtonRef,
 							modelValue: menuOpen.value,
-							"onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => menuOpen.value = $event),
+							"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => menuOpen.value = $event),
 							ariaLabel: "Table column options",
-							items: subMenuItems.value,
+							items: __props.additionalMenuItems,
 							size: "small",
 							variant: "transparent",
 							"leading-icon": "more-actions",
-							onKeydown: _cache[12] || (_cache[12] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
+							onKeydown: _cache[10] || (_cache[10] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
 						}, null, 8, ["modelValue", "items"])], 2)) : createCommentVNode("", true),
+						showSortButton.value ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass([
+								"header-action-button",
+								"sort-button",
+								{ "action-button-hidden": !sortButtonVisible.value }
+							])
+						}, [createVNode(unref(KdsToggleButton), {
+							ref_key: "sortButton",
+							ref: sortButton,
+							"model-value": isSorted.value,
+							variant: "transparent",
+							size: "small",
+							"leading-icon": __props.sortDirection === -1 ? "sort-descending" : "sort-ascending",
+							ariaLabel: "Sort",
+							tooltip: "Sort",
+							onKeydown: _cache[11] || (_cache[11] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"])),
+							"onUpdate:modelValue": onSortToggle
+						}, null, 8, ["model-value", "leading-icon"])], 2)) : createCommentVNode("", true),
+						__props.column.deletable ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(KdsButton), {
+							ref_key: "columnDeleteButton",
+							ref: columnDeleteButton,
+							variant: "transparent",
+							"leading-icon": "trash",
+							size: "small",
+							ariaLabel: "Delete column",
+							onClick: _cache[12] || (_cache[12] = withModifiers(($event) => emit("onDeleteColumn"), ["stop"])),
+							onKeydown: _cache[13] || (_cache[13] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
+						}, null, 512)])) : createCommentVNode("", true),
 						__props.tableConfig.enableColumnResizing ? (openBlock(), createElementBlock("div", {
-							key: 2,
+							key: 3,
 							class: normalizeClass(["resize-handle-area", {
 								hover: resizeHandleHovered.value && !__props.otherColumnResizing,
 								drag: dragging.value
 							}]),
 							style: normalizeStyle({ height: `${dragHandleHeight(dragging.value)}px` }),
-							onPointerover: _cache[13] || (_cache[13] = ($event) => resizeHandleHovered.value = true),
-							onPointerleave: _cache[14] || (_cache[14] = ($event) => resizeHandleHovered.value = false),
-							onPointerdownPassive: _cache[15] || (_cache[15] = ($event) => onPointerDown($event)),
-							onPointerupPassive: _cache[16] || (_cache[16] = ($event) => onPointerUp($event)),
-							onPointermove: _cache[17] || (_cache[17] = (...args) => unref(onPointerMove) && unref(onPointerMove)(...args)),
-							onLostpointercapture: _cache[18] || (_cache[18] = (...args) => unref(onLostPointerCapture) && unref(onLostPointerCapture)(...args))
-						}, [..._cache[21] || (_cache[21] = [createElementVNode("span", { class: "resize-handle" }, null, -1)])], 38)) : createCommentVNode("", true)
+							onPointerover: _cache[14] || (_cache[14] = ($event) => resizeHandleHovered.value = true),
+							onPointerleave: _cache[15] || (_cache[15] = ($event) => resizeHandleHovered.value = false),
+							onPointerdownPassive: _cache[16] || (_cache[16] = ($event) => onPointerDown($event)),
+							onPointerupPassive: _cache[17] || (_cache[17] = ($event) => onPointerUp($event)),
+							onPointermove: _cache[18] || (_cache[18] = (...args) => unref(onPointerMove) && unref(onPointerMove)(...args)),
+							onLostpointercapture: _cache[19] || (_cache[19] = (...args) => unref(onLostPointerCapture) && unref(onLostPointerCapture)(...args))
+						}, [..._cache[22] || (_cache[22] = [createElementVNode("span", { class: "resize-handle" }, null, -1)])], 38)) : createCommentVNode("", true)
 					], 38);
 				};
 			}
-		}), [["__scopeId", "data-v-31a6758f"]])
+		}), [["__scopeId", "data-v-0f9137cc"]])
 	},
 	props: {
 		tableConfig: {
@@ -6044,19 +6081,32 @@ var Header_vue_vue_type_script_lang_default = {
 			focusedHeaderIndex: null
 		};
 	},
-	computed: { headerSelectionOverlayStyle() {
-		const columnIndex = this.selectedHeaderIndex;
-		if (columnIndex === null || !this.tableConfig.enableHeaderCellSelection) return null;
-		let left = 0;
-		if (this.tableConfig.showSelection) left += SPECIAL_COLUMNS_SIZE;
-		if (this.tableConfig.enableRowDeletion) left += SPECIAL_COLUMNS_SIZE;
-		for (let i = 0; i < columnIndex; i++) left += this.columnSize(i);
-		const width = this.columnSize(columnIndex);
-		return {
-			left: `${left}px`,
-			width: `${width}px`
-		};
-	} },
+	computed: {
+		/**
+		* The smallest size that can be given to all columns at once, i.e. the
+		* largest of their individual minimums (see {@link minSizeOfColumn}).
+		*/
+		minSizeForAllColumns() {
+			return this.columns.reduce((max, column, index) => Math.max(max, minSizeOfColumn({
+				column,
+				actionConfig: this.actionConfig,
+				additionalMenuItems: this.additionalHeaderMenuItems[index]
+			})), 50);
+		},
+		headerSelectionOverlayStyle() {
+			const columnIndex = this.selectedHeaderIndex;
+			if (columnIndex === null || !this.tableConfig.enableHeaderCellSelection) return null;
+			let left = 0;
+			if (this.tableConfig.showSelection) left += SPECIAL_COLUMNS_SIZE;
+			if (this.tableConfig.enableRowDeletion) left += SPECIAL_COLUMNS_SIZE;
+			for (let i = 0; i < columnIndex; i++) left += this.columnSize(i);
+			const width = this.columnSize(columnIndex);
+			return {
+				left: `${left}px`,
+				width: `${width}px`
+			};
+		}
+	},
 	methods: {
 		columnSize(columnIndex) {
 			return this.colSizesFrozenWhenResizing[columnIndex] ?? this.minimumColumnWidth;
@@ -6097,7 +6147,7 @@ var Header_vue_vue_type_script_lang_default = {
 			this.$emit("columnResize", columnIndex, newSize);
 		},
 		onAllColumnsResize(newSize) {
-			this.$emit("allColumnsResize", newSize);
+			this.$emit("allColumnsResize", Math.max(newSize, this.minSizeForAllColumns));
 		},
 		onColumnSort(columnIndex, direction) {
 			this.$emit("columnSort", columnIndex, direction);
@@ -6260,7 +6310,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
 		style: normalizeStyle($options.headerSelectionOverlayStyle)
 	}, null, 6)) : createCommentVNode("", true)]);
 }
-var Header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Header_vue_vue_type_script_lang_default, [["render", _sfc_render$2], ["__scopeId", "data-v-fc0a0ecb"]]);
+var Header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Header_vue_vue_type_script_lang_default, [["render", _sfc_render$2], ["__scopeId", "data-v-885a5768"]]);
 //#endregion
 //#region src/components/layout/NewRowButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "sticky-container" };
@@ -8314,6 +8364,20 @@ var TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default = {
 		columnIds() {
 			return getPropertiesFromColumns(this.columns, "id");
 		},
+		/**
+		* The width each column needs at the very least, i.e. the one at which the
+		* action buttons of its header still fit (see {@link minSizeOfColumn}).
+		*/
+		minColumnSizes() {
+			return this.columns.reduce((minSizes, column, index) => {
+				minSizes[column.id] = minSizeOfColumn({
+					column,
+					actionConfig: this.actionConfig,
+					additionalMenuItems: this.additionalHeaderMenuItems[index]
+				});
+				return minSizes;
+			}, {});
+		},
 		currentColumnsWithAutoSize() {
 			return /* @__PURE__ */ new Set([...Reflect.ownKeys(this.currentColumnSizes), ...Reflect.ownKeys(this.currentHeightsByColumn)]);
 		},
@@ -8429,7 +8493,7 @@ var TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default = {
 				sizesToUpdate: this.currentColumnSizes,
 				autoSizesByRow: autoColumnSizes,
 				fixedSizes: this.autoColumnSizesOptions.fixedSizes,
-				minSize: 50,
+				minSize: (columnId) => this.minColumnSizes[columnId] ?? 50,
 				paddings: this.columnPaddingsHorizontal
 			});
 		},
@@ -8438,7 +8502,7 @@ var TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default = {
 				sizesToUpdate: this.currentHeightsByColumn,
 				autoSizesByRow: autoRowHeights,
 				fixedSizes: this.autoRowHeightOptions.fixedHeights,
-				minSize: MIN_ROW_HEIGHT
+				minSize: () => MIN_ROW_HEIGHT
 			});
 		},
 		async calculateAutoSizes() {
@@ -8447,8 +8511,8 @@ var TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default = {
 			const headerComputesColumns = this.autoColumnSizeCalculationRequired && this.autoColumnSizesOptions.calculateForHeader;
 			const bodyComputesRows = this.autoRowHeightSizingActive;
 			const computeColumns = this.autoColumnSizeCalculationRequired;
-			if (computeColumns) this.currentColumnSizes = this.initializeSizesWithMinSize(50);
-			if (bodyComputesRows) this.currentHeightsByColumn = this.initializeSizesWithMinSize(MIN_ROW_HEIGHT);
+			if (computeColumns) this.currentColumnSizes = this.initializeSizesWithMinSize((columnId) => this.minColumnSizes[columnId] ?? 50);
+			if (bodyComputesRows) this.currentHeightsByColumn = this.initializeSizesWithMinSize(() => MIN_ROW_HEIGHT);
 			if (bodyComputesColumns || bodyComputesRows) {
 				const { autoColumnSizes, autoRowHeights } = this.calculateAutoSizesBody();
 				if (bodyComputesRows) this.setAutoRowHeights(autoRowHeights);
@@ -8463,12 +8527,12 @@ var TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default = {
 		initializeSizesWithMinSize(minSize) {
 			return this.columnIds.reduce((sizes, columnId) => ({
 				...sizes,
-				[columnId]: minSize
+				[columnId]: minSize(columnId)
 			}), {});
 		},
 		addFixedAndAutoSizes({ sizesToUpdate, autoSizesByRow, fixedSizes, minSize, paddings = null }) {
 			Reflect.ownKeys(fixedSizes).forEach((columnId) => {
-				if (sizesToUpdate.hasOwnProperty(columnId)) sizesToUpdate[columnId] = Math.max(minSize, fixedSizes[columnId] + (paddings?.[columnId] || 0));
+				if (sizesToUpdate.hasOwnProperty(columnId)) sizesToUpdate[columnId] = Math.max(minSize(columnId), fixedSizes[columnId] + (paddings?.[columnId] || 0));
 			});
 			autoSizesByRow.forEach((autoSizes) => {
 				Reflect.ownKeys(autoSizes).forEach((columnId) => {
@@ -8605,7 +8669,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		"onVnodeMounted"
 	])) : createCommentVNode("", true)], 64);
 }
-var TableUIWithAutoSizeCalculation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default, [["render", _sfc_render], ["__scopeId", "data-v-11d56c71"]]);
+var TableUIWithAutoSizeCalculation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default, [["render", _sfc_render], ["__scopeId", "data-v-f3ef2f4b"]]);
 //#endregion
 export { PopoverContainer_default as PopoverContainer, TableActionBar_default as TableActionBar, TableUI_default as TableUI, TableUIWithAutoSizeCalculation_default as TableUIWithAutoSizeCalculation, columnSortText, columnTypes, constants_default as constants, defaultPageSize, getMissingValueMessage, isMissingValue, unpackObjectRepresentation, useButtonPopoverInteraction, useColumnSizes };