@knime/kds-table 6.12.0 → 6.12.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @knime/kds-table
 
+## 6.12.2
+
+### Patch Changes
+
+- 6e9b531: Hide the action bar in case it's empty due to hiding the sort button
+- @knime/kds-components@6.12.2
+  - @knime/kds-styles@6.12.2
+
+## 6.12.1
+
+### Patch Changes
+
+- 720c835: `TableUI`: no longer flickers on initial load. It stays hidden until one tick
+  after it has reported its available width for the first time, so column sizes
+  derived from that width are already applied when it first becomes visible.
+- @knime/kds-components@6.12.1
+  - @knime/kds-styles@6.12.1
+
 ## 6.12.0
 
 ### Patch Changes

package/dist/index.css

@@ -215,7 +215,7 @@ tr {
 }
 
 .kds-table-action-bar {
-&[data-v-206732ac] {
+&[data-v-b0b2c849] {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   min-height: var(--kds-dimension-component-height-2-5x);
@@ -223,42 +223,42 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-bottom: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-206732ac] {
+&.temporary-view[data-v-b0b2c849] {
     background-color: var(--kds-color-background-static-info-muted);
 }
-& .dimension[data-v-206732ac] {
+& .dimension[data-v-b0b2c849] {
     font: var(--kds-font-base-title-small);
     color: var(--kds-color-text-and-icon-muted);
     white-space: pre;
 }
 & .preview {
-&[data-v-206732ac] {
+&[data-v-b0b2c849] {
     display: flex;
     gap: var(--kds-spacing-container-0-12x);
     align-items: center;
 }
-& .preview-label[data-v-206732ac] {
+& .preview-label[data-v-b0b2c849] {
       font: var(--kds-font-base-title-small-strong);
       color: var(--kds-color-text-and-icon-neutral);
 }
 }
-& .left[data-v-206732ac],
-  & .center[data-v-206732ac],
-  & .right[data-v-206732ac] {
+& .left[data-v-b0b2c849],
+  & .center[data-v-b0b2c849],
+  & .right[data-v-b0b2c849] {
     display: flex;
     flex: 1;
     align-items: center;
     min-width: 0;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .left[data-v-206732ac],
-  & .center[data-v-206732ac] {
+& .left[data-v-b0b2c849],
+  & .center[data-v-b0b2c849] {
     gap: var(--kds-spacing-container-0-5x);
 }
-& .center[data-v-206732ac] {
+& .center[data-v-b0b2c849] {
     justify-content: center;
 }
-& .right[data-v-206732ac] {
+& .right[data-v-b0b2c849] {
     gap: var(--kds-spacing-container-0-25x);
     justify-content: flex-end;
 }
@@ -636,7 +636,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-83bc03a3] {
+.wrapper[data-v-bc9c37d0] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -646,7 +646,7 @@ tr.row {
 }
 }
 table {
-&[data-v-83bc03a3] {
+&[data-v-bc9c37d0] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -654,20 +654,20 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-83bc03a3]:focus {
+&[data-v-bc9c37d0]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-83bc03a3] {
+& .new-row-footer[data-v-bc9c37d0] {
     width: 100%;
 }
 }
 
 /* The empty state is placed into the rows' area by TableCoreVirtual. */
-.empty-state[data-v-83bc03a3] {
+.empty-state[data-v-bc9c37d0] {
   max-width: 100%;
 }
 
-.table-column-size-calculation[data-v-f3ef2f4b] {
+.table-column-size-calculation[data-v-f0e4039f] {
   position: absolute;
   top: -9999px;
   left: -9999px;

package/dist/index.js

@@ -4368,7 +4368,7 @@ var injectColumnSizes = () => {
 };
 //#endregion
 //#region src/components/ui/EmptyRow.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = {
+var _hoisted_1$11 = {
 	key: 0,
 	class: "deletion-cell-spacer"
 };
@@ -4394,7 +4394,7 @@ var EmptyRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					height: `${__props.height}px`
 				})
 			}, [
-				__props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$12)) : createCommentVNode("", true),
+				__props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$11)) : createCommentVNode("", true),
 				__props.tableConfig.showSelection ? (openBlock(), createElementBlock("td", {
 					key: 1,
 					class: "select-cell",
@@ -5246,8 +5246,33 @@ var createEditingCellKeydownHandler = ({ moveSelection }) => {
 	};
 };
 //#endregion
+//#region src/components/composables/useVisibleAfterAvailableWidth.ts
+/**
+* Keeps the table hidden until one tick after the available width has been
+* reported for the first time.
+*
+* Column sizes that are derived from the available width (see the
+* `update:available-width` emit) can only be applied once that width is known,
+* i.e. anything rendered before that is rendered at sizes which are about to
+* change — a visible jump on every initial load. Waiting one tick after the
+* report lets the reaction to it (and with it the column-size CSS variables)
+* reach the DOM first, so the first frame the user sees is the final one.
+*/
+var useVisibleAfterAvailableWidth = () => {
+	const isVisible = ref(false);
+	const onAvailableWidthReported = async () => {
+		if (isVisible.value) return;
+		await nextTick();
+		isVisible.value = true;
+	};
+	return {
+		isVisible,
+		onAvailableWidthReported
+	};
+};
+//#endregion
 //#region src/components/control/PageNavigation.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = { class: "page-navigation" };
+var _hoisted_1$10 = { class: "page-navigation" };
 var _hoisted_2$7 = { class: "navigation-buttons" };
 var _hoisted_3$4 = { class: "page-count" };
 var _hoisted_4$3 = { class: "navigation-buttons" };
@@ -5275,7 +5300,7 @@ var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			emit("pageChange", newPageNumber);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$11, [
+			return openBlock(), createElementBlock("div", _hoisted_1$10, [
 				createElementVNode("div", _hoisted_2$7, [createVNode(unref(KdsButton), {
 					variant: "transparent",
 					size: "small",
@@ -5313,7 +5338,7 @@ var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 }), [["__scopeId", "data-v-95577571"]]);
 //#endregion
 //#region src/components/control/PageRowRange.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = {
+var _hoisted_1$9 = {
 	key: 0,
 	class: "subtle"
 };
@@ -5358,7 +5383,7 @@ var PageControls_vue_vue_type_script_lang_default = {
 				const pageRangeEnd = computed(() => Math.min(__props.currentPage * __props.pageSize, __props.currentItems));
 				const rowCountText = computed(() => hasMultiplePages.value && __props.currentItems ? `of ${__props.currentItems}` : __props.currentItems);
 				return (_ctx, _cache) => {
-					return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$10, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
+					return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$9, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
 						createElementVNode("span", _hoisted_3$3, toDisplayString(__props.rowLabel) + ":", 1),
 						hasMultiplePages.value && __props.currentItems ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(pageRangeStart.value) + "–" + toDisplayString(pageRangeEnd.value), 1)) : createCommentVNode("", true),
 						createElementVNode("span", _hoisted_5$1, toDisplayString(rowCountText.value), 1)
@@ -5423,7 +5448,7 @@ var PageControls_vue_vue_type_script_lang_default = {
 };
 //#endregion
 //#region src/components/control/PageControls.vue
-var _hoisted_1$9 = {
+var _hoisted_1$8 = {
 	key: 0,
 	class: "page-controls"
 };
@@ -5432,7 +5457,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_PageRowRange = resolveComponent("PageRowRange");
 	const _component_PageNavigation = resolveComponent("PageNavigation");
 	const _component_KdsMenuButton = resolveComponent("KdsMenuButton");
-	return $options.showPageNavigation || $options.pageSizeItems.length ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+	return $options.showPageNavigation || $options.pageSizeItems.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
 		createVNode(_component_PageRowRange, {
 			class: "page-row-range",
 			"current-items": $props.tableState.tableSizes?.currentNumRows,
@@ -5479,11 +5504,11 @@ var PageControls_default = /*#__PURE__*/ _plugin_vue_export_helper_default(PageC
 //#endregion
 //#region src/components/control/actionbar/PopoverContainer.vue
 var _sfc_main = {};
-var _hoisted_1$8 = { class: "popover" };
+var _hoisted_1$7 = { class: "popover" };
 var _hoisted_2$4 = { class: "header" };
 var _hoisted_3$2 = { class: "body" };
 function _sfc_render$3(_ctx, _cache) {
-	return openBlock(), createElementBlock("div", _hoisted_1$8, [createElementVNode("span", _hoisted_2$4, [renderSlot(_ctx.$slots, "header", {}, void 0, true)]), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "body", {}, void 0, true)])]);
+	return openBlock(), createElementBlock("div", _hoisted_1$7, [createElementVNode("span", _hoisted_2$4, [renderSlot(_ctx.$slots, "header", {}, void 0, true)]), createElementVNode("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "body", {}, void 0, true)])]);
 }
 var PopoverContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render$3], ["__scopeId", "data-v-349cd3ba"]]);
 //#endregion
@@ -5516,7 +5541,7 @@ var useButtonPopoverInteraction = ({ keepButtonActive }) => {
 };
 //#endregion
 //#region src/components/control/actionbar/SortControl.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = { class: "body" };
+var _hoisted_1$6 = { class: "body" };
 var NONE_COLUMN_VALUE = "None";
 //#endregion
 //#region src/components/control/actionbar/SortControl.vue
@@ -5591,7 +5616,7 @@ var SortControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						name: "sort-ascending",
 						size: "small"
 					}), _cache[0] || (_cache[0] = createTextVNode(" Sorting ", -1))]),
-					body: withCtx(() => [createElementVNode("div", _hoisted_1$7, [createVNode(unref(KdsDropdown), {
+					body: withCtx(() => [createElementVNode("div", _hoisted_1$6, [createVNode(unref(KdsDropdown), {
 						"model-value": selectedColumn.value,
 						"possible-values": possibleColumns.value,
 						ariaLabel: "Column to sort by",
@@ -5621,7 +5646,7 @@ var SortControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 }), [["__scopeId", "data-v-97a272c8"]]);
 //#endregion
 //#region src/components/control/TableActionBar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = { class: "left" };
+var _hoisted_1$5 = { class: "left" };
 var _hoisted_2$3 = { class: "center" };
 var _hoisted_3$1 = {
 	key: 0,
@@ -5659,7 +5684,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const isTemporaryView = computed(() => viewType.value === "TEMP_VIEW" || viewType.value === "PREVIEW");
 		const isPreview = computed(() => viewType.value === "PREVIEW");
 		const showResetButton = computed(() => viewType.value === "TEMP_VIEW");
-		const hasContent = computed(() => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSearch || __props.actionConfig.enableSorting || __props.actionConfig.forceShow || Boolean(slots["action-bar-left"]));
+		const hasContent = computed(() => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSorting && !__props.actionConfig.hideSortingButton || __props.actionConfig.enableSearch || __props.actionConfig.forceShow || Boolean(slots["action-bar-left"]));
 		/**
 		* Renders "total" by default, and "current of total" only when `current` is
 		* given and strictly below `total`. The `current >= total` guard prevents an
@@ -5682,7 +5707,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				key: 0,
 				class: normalizeClass(["kds-table-action-bar", { "temporary-view": isTemporaryView.value }])
 			}, [
-				createElementVNode("div", _hoisted_1$6, [__props.actionConfig.enableSorting && !__props.actionConfig.hideSortingButton ? (openBlock(), createBlock(SortControl_default, {
+				createElementVNode("div", _hoisted_1$5, [__props.actionConfig.enableSorting && !__props.actionConfig.hideSortingButton ? (openBlock(), createBlock(SortControl_default, {
 					key: 0,
 					"col-sort-values": __props.colSortValues,
 					"sort-control-options": __props.sortControlOptions,
@@ -5720,7 +5745,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			], 2)) : createCommentVNode("", true);
 		};
 	}
-}), [["__scopeId", "data-v-206732ac"]]);
+}), [["__scopeId", "data-v-b0b2c849"]]);
 //#endregion
 //#region src/utils/columnHeaderActionButtons.ts
 /**
@@ -5789,7 +5814,7 @@ var useAutoScrollOnRightEdge = ({ scrollContainer, autoScrollOffset, onAutoScrol
 };
 //#endregion
 //#region src/components/layout/HeaderCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = ["tabindex"];
+var _hoisted_1$4 = ["tabindex"];
 var _hoisted_2$2 = { class: "header-text-container" };
 var _hoisted_3 = {
 	key: 0,
@@ -6027,7 +6052,7 @@ var Header_vue_vue_type_script_lang_default = {
 							unref(vKdsTooltip),
 							__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),
+						]])], 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$4),
 						__props.additionalMenuItems?.length ? (openBlock(), createElementBlock("div", {
 							key: 0,
 							class: normalizeClass([
@@ -6300,7 +6325,7 @@ var Header_vue_vue_type_script_lang_default = {
 };
 //#endregion
 //#region src/components/layout/Header.vue
-var _hoisted_1$4 = {
+var _hoisted_1$3 = {
 	key: 0,
 	scope: "col",
 	class: "deletion-cell-spacer",
@@ -6311,7 +6336,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_HeaderCell = resolveComponent("HeaderCell");
 	const _component_KdsButton = resolveComponent("KdsButton");
 	return openBlock(), createElementBlock("thead", null, [createElementVNode("tr", { style: normalizeStyle({ ...$setup.headerStyles }) }, [
-		$props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("th", _hoisted_1$4)) : createCommentVNode("", true),
+		$props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("th", _hoisted_1$3)) : createCommentVNode("", true),
 		$props.tableConfig.showSelection ? (openBlock(), createElementBlock("th", {
 			key: 1,
 			scope: "col",
@@ -6412,7 +6437,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
 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" };
+var _hoisted_1$2 = { class: "sticky-container" };
 var buttonRef = "button";
 //#endregion
 //#region src/components/layout/NewRowButton.vue
@@ -6426,7 +6451,7 @@ var NewRowButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			button.value?.$el.focus();
 		} });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [createVNode(unref(KdsButton), {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [createVNode(unref(KdsButton), {
 				ref: buttonRef,
 				label: "Add",
 				"leading-icon": "plus",
@@ -6461,7 +6486,7 @@ var CellExpandButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 }), [["__scopeId", "data-v-f204ddf3"]]);
 //#endregion
 //#region src/components/layout/CellRenderer.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = {
+var _hoisted_1$1 = {
 	ref: "cell-content",
 	class: "cell-content"
 };
@@ -6608,7 +6633,7 @@ var CellRenderer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					value: val,
 					cell: _ctx.$el
 				}))
-			}, [createElementVNode("div", _hoisted_1$2, [__props.isEditing ? renderSlot(_ctx.$slots, "editable-cell", { cellElement: _ctx.$el }, void 0, true, 0) : __props.isMissing ? (openBlock(), createBlock(unref(KdsMissingValueIcon), {
+			}, [createElementVNode("div", _hoisted_1$1, [__props.isEditing ? renderSlot(_ctx.$slots, "editable-cell", { cellElement: _ctx.$el }, void 0, true, 0) : __props.isMissing ? (openBlock(), createBlock(unref(KdsMissingValueIcon), {
 				key: 1,
 				size: "small"
 			})) : __props.isSlotted ? renderSlot(_ctx.$slots, "default", { width: __props.size - props.defaultLeftRightPadding * 2 - (showCellExpandButton.value && !__props.overlayExpandButton ? unref(EXPAND_BUTTON_WIDTH) : 0) }, void 0, true, 2) : (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(__props.text), 1)), showCellExpandButton.value ? (openBlock(), createBlock(CellExpandButton_default, {
@@ -6718,7 +6743,7 @@ var Cell_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/layout/Row.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = {
+var _hoisted_1 = {
 	key: 0,
 	class: "deletion-cell"
 };
@@ -6945,7 +6970,7 @@ var TableUI_vue_vue_type_script_lang_default = {
 							...rowHeightStyle.value
 						})
 					}, [
-						__props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$1, [createVNode(unref(KdsButton), {
+						__props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1, [createVNode(unref(KdsButton), {
 							ref_key: "deleteButton",
 							ref: deleteButton,
 							variant: "transparent",
@@ -7350,6 +7375,11 @@ var TableUI_vue_vue_type_script_lang_default = {
 		const header = ref(null);
 		const selectionOverlay = ref([]);
 		const totalWidth = useTotalWidth(wrapper);
+		const { isVisible: tableIsVisible, onAvailableWidthReported } = useVisibleAfterAvailableWidth();
+		const onUpdateAvailableWidth = (newAvailableWidth) => {
+			emit("update:available-width", newAvailableWidth);
+			onAvailableWidthReported();
+		};
 		const { selectCell, expandCellSelection, clearCellSelection, currentRectId, rectMinMax, selectedCell, isSingleSelectedCell } = useCellSelection(computed(() => Boolean(props.tableConfig.enableCellSelection)));
 		watch(selectedCell, (newCell) => emit("cellSelectionChange", newCell ?? null));
 		const selectCellsOnMove = useBoolean(false);
@@ -7442,6 +7472,8 @@ var TableUI_vue_vue_type_script_lang_default = {
 		return {
 			wrapper,
 			totalWidth,
+			tableIsVisible,
+			onUpdateAvailableWidth,
 			tableCore,
 			header,
 			selectionOverlay,
@@ -8022,7 +8054,6 @@ var TableUI_vue_vue_type_script_lang_default = {
 };
 //#endregion
 //#region src/components/TableUI.vue
-var _hoisted_1 = { class: "wrapper" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_TableActionBar = resolveComponent("TableActionBar");
 	const _component_Row = resolveComponent("Row");
@@ -8032,7 +8063,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_KdsEmptyState = resolveComponent("KdsEmptyState");
 	const _component_TableCore = resolveComponent("TableCore");
 	const _component_PageControls = resolveComponent("PageControls");
-	return openBlock(), createElementBlock("div", _hoisted_1, [$options.showActionBar ? (openBlock(), createBlock(_component_TableActionBar, {
+	return openBlock(), createElementBlock("div", {
+		class: "wrapper",
+		style: normalizeStyle({ visibility: $setup.tableIsVisible ? void 0 : "hidden" })
+	}, [$options.showActionBar ? (openBlock(), createBlock(_component_TableActionBar, {
 		key: 0,
 		"table-sizes": $props.tableState.tableSizes,
 		"action-state": $props.actionState,
@@ -8060,22 +8094,22 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	])) : createCommentVNode("", true), createElementVNode("table", {
 		ref: "wrapper",
 		tabindex: -1,
-		onPointerleave: _cache[11] || (_cache[11] = (...args) => $setup.selectCellsOnMove.setFalse && $setup.selectCellsOnMove.setFalse(...args)),
-		onPointerdownPassive: _cache[12] || (_cache[12] = withModifiers(($event) => $event.button === 0 && $setup.selectCellsOnMove.setTrue(), ["stop"])),
-		onPointerupPassive: _cache[13] || (_cache[13] = ($event) => $event.button === 0 && $setup.selectCellsOnMove.setFalse()),
+		onPointerleave: _cache[10] || (_cache[10] = (...args) => $setup.selectCellsOnMove.setFalse && $setup.selectCellsOnMove.setFalse(...args)),
+		onPointerdownPassive: _cache[11] || (_cache[11] = withModifiers(($event) => $event.button === 0 && $setup.selectCellsOnMove.setTrue(), ["stop"])),
+		onPointerupPassive: _cache[12] || (_cache[12] = ($event) => $event.button === 0 && $setup.selectCellsOnMove.setFalse()),
 		onKeydown: [
-			_cache[14] || (_cache[14] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), [
+			_cache[13] || (_cache[13] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), [
 				"ctrl",
 				"shift",
 				"exact"
 			]), ["c"])),
-			_cache[15] || (_cache[15] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), [
+			_cache[14] || (_cache[14] = withKeys(withModifiers((...args) => $setup.handleCopyOnKeydown && $setup.handleCopyOnKeydown(...args), [
 				"meta",
 				"shift",
 				"exact"
 			]), ["c"])),
-			_cache[16] || (_cache[16] = withKeys(withModifiers((...args) => $setup.handleDeleteSelection && $setup.handleDeleteSelection(...args), ["exact"]), ["delete"])),
-			_cache[17] || (_cache[17] = withKeys(withModifiers((...args) => $setup.clearCellSelectionAndStopPropagation && $setup.clearCellSelectionAndStopPropagation(...args), ["exact"]), ["escape"]))
+			_cache[15] || (_cache[15] = withKeys(withModifiers((...args) => $setup.handleDeleteSelection && $setup.handleDeleteSelection(...args), ["exact"]), ["delete"])),
+			_cache[16] || (_cache[16] = withKeys(withModifiers((...args) => $setup.clearCellSelectionAndStopPropagation && $setup.clearCellSelectionAndStopPropagation(...args), ["exact"]), ["escape"]))
 		]
 	}, [createVNode(_component_TableCore, {
 		ref: "tableCore",
@@ -8093,13 +8127,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 		"current-row-height": $options.currentRowHeight,
 		"new-column-button-width": $setup.newColumnButtonWidth,
 		onScrollerUpdate: $options.onScroll,
-		"onUpdate:availableWidth": _cache[8] || (_cache[8] = ($event) => _ctx.$emit("update:available-width", $event)),
+		"onUpdate:availableWidth": $setup.onUpdateAvailableWidth,
 		onMoveSelection: $options.onKeyboardMoveSelection,
 		onClearSelection: $setup.clearCellSelection,
 		onExpandSelectedCell: $options.expandSelectedCell,
 		onStartEditing: $options.onStartEditingCell,
-		onBodyFocusin: _cache[9] || (_cache[9] = ($event) => $setup.changeFocus(true)),
-		onBodyFocusout: _cache[10] || (_cache[10] = ($event) => $options.onTableBodyFocusOut())
+		onBodyFocusin: _cache[8] || (_cache[8] = ($event) => $setup.changeFocus(true)),
+		onBodyFocusout: _cache[9] || (_cache[9] = ($event) => $options.onTableBodyFocusOut())
 	}, createSlots({
 		row: withCtx(({ row, groupInd, rowInd }) => [createVNode(_component_Row, {
 			ref: $options.getRowRefName(groupInd, rowInd),
@@ -8274,6 +8308,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 		"current-row-height",
 		"new-column-button-width",
 		"onScrollerUpdate",
+		"onUpdate:availableWidth",
 		"onMoveSelection",
 		"onClearSelection",
 		"onExpandSelectedCell",
@@ -8293,9 +8328,9 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 		"table-state",
 		"onPageChange",
 		"onPageSizeUpdate"
-	])) : createCommentVNode("", true)], 544)]);
+	])) : createCommentVNode("", true)], 544)], 4);
 }
-var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-83bc03a3"]]);
+var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-bc9c37d0"]]);
 //#endregion
 //#region src/components/composables/useTableReady.ts
 var useTableReady = ({ onReady }) => {
@@ -8693,7 +8728,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_TableUI = resolveComponent("TableUI");
 	return openBlock(), createElementBlock(Fragment, null, [createVNode(_component_TableUI, mergeProps({
 		ref: "tableUI",
-		style: { visibility: $setup.tableIsVisible ? "visible" : "hidden" }
+		style: { visibility: $setup.tableIsVisible ? void 0 : "hidden" }
 	}, _ctx.$attrs, {
 		data: $props.data,
 		"current-selection": $props.currentSelection,
@@ -8764,7 +8799,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-f3ef2f4b"]]);
+var TableUIWithAutoSizeCalculation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUIWithAutoSizeCalculation_vue_vue_type_script_lang_default, [["render", _sfc_render], ["__scopeId", "data-v-f0e4039f"]]);
 //#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 };