@knime/kds-table 6.10.0 → 6.12.0

package/dist/index.js

@@ -1374,6 +1374,161 @@ var getMissingValueMessage = (cellData) => {
 };
 var getPropertiesFromColumns = (columnConfigs, key) => columnConfigs.map((colConfig) => colConfig[key]);
 //#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
+/**
+* Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
+*
+* @param fn
+*/
+function tryOnScopeDispose(fn, failSilently) {
+	if (getCurrentScope()) {
+		onScopeDispose(fn, failSilently);
+		return true;
+	}
+	return false;
+}
+var isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+//#endregion
+//#region ../../node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
+var defaultWindow = isClient ? window : void 0;
+isClient && window.document;
+isClient && window.navigator;
+isClient && window.location;
+/**
+* Get the dom element of a ref of element or Vue component instance
+*
+* @param elRef
+*/
+function unrefElement(elRef) {
+	var _$el;
+	const plain = toValue(elRef);
+	return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
+}
+/**
+* Mounted state in ref.
+*
+* @see https://vueuse.org/useMounted
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useMounted() {
+	const isMounted = shallowRef(false);
+	const instance = getCurrentInstance();
+	if (instance) onMounted(() => {
+		isMounted.value = true;
+	}, instance);
+	return isMounted;
+}
+/* @__NO_SIDE_EFFECTS__ */
+function useSupported(callback) {
+	const isMounted = useMounted();
+	return computed(() => {
+		isMounted.value;
+		return Boolean(callback());
+	});
+}
+/**
+* Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+*
+* @see https://vueuse.org/useRafFn
+* @param fn
+* @param options
+*/
+function useRafFn(fn, options = {}) {
+	const { immediate = true, fpsLimit = null, window = defaultWindow, once = false } = options;
+	const isActive = shallowRef(false);
+	const intervalLimit = computed(() => {
+		const limit = toValue(fpsLimit);
+		return limit ? 1e3 / limit : null;
+	});
+	let previousFrameTimestamp = 0;
+	let rafId = null;
+	function loop(timestamp) {
+		if (!isActive.value || !window) return;
+		if (!previousFrameTimestamp) previousFrameTimestamp = timestamp;
+		const delta = timestamp - previousFrameTimestamp;
+		if (intervalLimit.value && delta < intervalLimit.value) {
+			rafId = window.requestAnimationFrame(loop);
+			return;
+		}
+		previousFrameTimestamp = timestamp;
+		fn({
+			delta,
+			timestamp
+		});
+		if (once) {
+			isActive.value = false;
+			rafId = null;
+			return;
+		}
+		rafId = window.requestAnimationFrame(loop);
+	}
+	function resume() {
+		if (!isActive.value && window) {
+			isActive.value = true;
+			previousFrameTimestamp = 0;
+			rafId = window.requestAnimationFrame(loop);
+		}
+	}
+	function pause() {
+		isActive.value = false;
+		if (rafId != null && window) {
+			window.cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	}
+	if (immediate) resume();
+	tryOnScopeDispose(pause);
+	return {
+		isActive: shallowReadonly(isActive),
+		pause,
+		resume
+	};
+}
+/**
+* Reports changes to the dimensions of an Element's content or the border-box
+*
+* @see https://vueuse.org/useResizeObserver
+* @param target
+* @param callback
+* @param options
+*/
+function useResizeObserver(target, callback, options = {}) {
+	const { window = defaultWindow, ...observerOptions } = options;
+	let observer;
+	const isSupported = /* @__PURE__ */ useSupported(() => window && "ResizeObserver" in window);
+	const cleanup = () => {
+		if (observer) {
+			observer.disconnect();
+			observer = void 0;
+		}
+	};
+	const stopWatch = watch(computed(() => {
+		const _targets = toValue(target);
+		return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+	}), (els) => {
+		cleanup();
+		if (isSupported.value && window) {
+			observer = new ResizeObserver(callback);
+			for (const _el of els) if (_el) observer.observe(_el, observerOptions);
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const stop = () => {
+		cleanup();
+		stopWatch();
+	};
+	tryOnScopeDispose(stop);
+	return {
+		isSupported,
+		stop
+	};
+}
+Number.POSITIVE_INFINITY;
+//#endregion
 //#region ../../node_modules/.pnpm/@knime+vue-headless-virtual-scroller@0.2.0_vue@3.5.40_typescript@6.0.3_/node_modules/@knime/vue-headless-virtual-scroller/dist/vue-headless-virtual-scrolling.js
 var $ = Object.defineProperty;
 var P = (t, e, r) => e in t ? $(t, e, {
@@ -4567,6 +4722,22 @@ var TableCoreVirtual_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			*/
 			return Math.min(scrollContainer.offsetHeight, Math.floor(getBody().offsetHeight + headerHeight));
 		};
+		const headerHeight = ref(0);
+		const updateHeaderHeight = () => {
+			headerHeight.value = getHeaderHeight();
+		};
+		onMounted(updateHeaderHeight);
+		useResizeObserver(headerContainer, updateHeaderHeight);
+		const emptyStateStyle = computed(() => ({ height: `calc(100% - ${headerHeight.value}px)` }));
+		const isEmpty = computed(() => numRows.value === 0);
+		/**
+		* With all rows rendered there is nothing to scroll, so the container only takes
+		* the space it needs. Without any rows it keeps the full height nonetheless: the
+		* empty state fills the space the rows would have occupied, and the container's
+		* horizontal scrollbar belongs at the bottom of the table rather than directly
+		* below the header.
+		*/
+		const fitContent = computed(() => props.tableConfig.forceRenderAll && !isEmpty.value);
 		const { closeExpandedSubMenu, containerRef: injectedContainerRef, overflowStyles } = useCommonScrollContainerProps();
 		const { showResizeScrollSpacer, collapseResizeScrollSpacer, additionalSpacerWidth, onResizeScrollSpacerTransitionEnd } = useResizeScrollSpacer({
 			columnResizeActive: toRef(props, "columnResizeActive"),
@@ -4593,7 +4764,7 @@ var TableCoreVirtual_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 					unref(containerProps).ref.value = injectedContainerRef.value = element;
 				},
 				style: normalizeStyle(unref(overflowStyles)),
-				class: normalizeClass(["container", { "fit-content": __props.tableConfig.forceRenderAll }]),
+				class: normalizeClass(["container", { "fit-content": fitContent.value }]),
 				onScroll: _cache[7] || (_cache[7] = () => [unref(containerProps).onScroll(), unref(closeExpandedSubMenu)()])
 			}, [
 				createElementVNode("div", {
@@ -4634,8 +4805,13 @@ var TableCoreVirtual_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 					belowBody: withCtx(() => [renderSlot(_ctx.$slots, "belowBody", {}, void 0, true)]),
 					_: 3
 				}),
-				unref(showResizeScrollSpacer) ? (openBlock(), createElementBlock("div", {
+				isEmpty.value && _ctx.$slots["empty-state"] ? (openBlock(), createElementBlock("div", {
 					key: 0,
+					class: "empty-state-container",
+					style: normalizeStyle(emptyStateStyle.value)
+				}, [renderSlot(_ctx.$slots, "empty-state", {}, void 0, true)], 4)) : createCommentVNode("", true),
+				unref(showResizeScrollSpacer) ? (openBlock(), createElementBlock("div", {
+					key: 1,
 					class: normalizeClass(["resize-scroll-spacer", { collapsing: unref(collapseResizeScrollSpacer) }]),
 					"aria-hidden": "true",
 					style: normalizeStyle({ width: `calc(var(${unref(BODY_WIDTH_CSS_VAR)}) + ${unref(additionalSpacerWidth)})` }),
@@ -4644,7 +4820,7 @@ var TableCoreVirtual_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			], 38)) : createCommentVNode("", true);
 		};
 	}
-}), [["__scopeId", "data-v-45a530bb"]]);
+}), [["__scopeId", "data-v-188dbeca"]]);
 //#endregion
 //#region src/components/composables/useAvailableWidth.ts
 var import_rafThrottle = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
@@ -4849,7 +5025,7 @@ var TableCore_default = /* @__PURE__ */ defineComponent({
 				onClearSelection: _cache[2] || (_cache[2] = ($event) => emit("clearSelection")),
 				onBodyFocusin: _cache[3] || (_cache[3] = ($event) => emit("bodyFocusin")),
 				onBodyFocusout: _cache[4] || (_cache[4] = ($event) => emit("bodyFocusout"))
-			}, {
+			}, createSlots({
 				header: withCtx(({ getDragHandleHeight }) => [renderSlot(_ctx.$slots, "header", { getDragHandleHeight })]),
 				row: withCtx(({ row, rowInd }) => [renderSlot(_ctx.$slots, "row", {
 					row,
@@ -4858,8 +5034,12 @@ var TableCore_default = /* @__PURE__ */ defineComponent({
 				})]),
 				"cell-selection-overlay": withCtx(() => [renderSlot(_ctx.$slots, "cell-selection-overlay")]),
 				belowBody: withCtx(() => [renderSlot(_ctx.$slots, "belowBody")]),
-				_: 3
-			}, 8, [
+				_: 2
+			}, [_ctx.$slots["empty-state"] ? {
+				name: "empty-state",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "empty-state")]),
+				key: "0"
+			} : void 0]), 1032, [
 				"scroll-data",
 				"scroll-config",
 				"special-column-sizes",
@@ -5068,7 +5248,7 @@ var createEditingCellKeydownHandler = ({ moveSelection }) => {
 //#endregion
 //#region src/components/control/PageNavigation.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$11 = { class: "page-navigation" };
-var _hoisted_2$8 = { class: "navigation-buttons" };
+var _hoisted_2$7 = { class: "navigation-buttons" };
 var _hoisted_3$4 = { class: "page-count" };
 var _hoisted_4$3 = { class: "navigation-buttons" };
 //#endregion
@@ -5096,7 +5276,7 @@ var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$11, [
-				createElementVNode("div", _hoisted_2$8, [createVNode(unref(KdsButton), {
+				createElementVNode("div", _hoisted_2$7, [createVNode(unref(KdsButton), {
 					variant: "transparent",
 					size: "small",
 					"leading-icon": "chevron-left-double",
@@ -5137,7 +5317,7 @@ var _hoisted_1$10 = {
 	key: 0,
 	class: "subtle"
 };
-var _hoisted_2$7 = {
+var _hoisted_2$6 = {
 	key: 1,
 	class: "row-range-container"
 };
@@ -5178,7 +5358,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$7, [
+					return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$10, "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)
@@ -5247,7 +5427,7 @@ var _hoisted_1$9 = {
 	key: 0,
 	class: "page-controls"
 };
-var _hoisted_2$6 = { class: "page-size-menu" };
+var _hoisted_2$5 = { class: "page-size-menu" };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_PageRowRange = resolveComponent("PageRowRange");
 	const _component_PageNavigation = resolveComponent("PageNavigation");
@@ -5280,7 +5460,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 			"has-next-page",
 			"has-previous-page"
 		])) : createCommentVNode("", true),
-		createElementVNode("div", _hoisted_2$6, [$options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
+		createElementVNode("div", _hoisted_2$5, [$options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
 			key: 0,
 			items: $options.pageSizeItems,
 			label: $options.createText($props.pageConfig.pageSize),
@@ -5300,10 +5480,10 @@ var PageControls_default = /*#__PURE__*/ _plugin_vue_export_helper_default(PageC
 //#region src/components/control/actionbar/PopoverContainer.vue
 var _sfc_main = {};
 var _hoisted_1$8 = { class: "popover" };
-var _hoisted_2$5 = { class: "header" };
+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$5, [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$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)])]);
 }
 var PopoverContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render$3], ["__scopeId", "data-v-349cd3ba"]]);
 //#endregion
@@ -5442,7 +5622,7 @@ var SortControl_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 //#endregion
 //#region src/components/control/TableActionBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = { class: "left" };
-var _hoisted_2$4 = { class: "center" };
+var _hoisted_2$3 = { class: "center" };
 var _hoisted_3$1 = {
 	key: 0,
 	class: "preview"
@@ -5508,7 +5688,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					"sort-control-options": __props.sortControlOptions,
 					onColumnSort: _cache[0] || (_cache[0] = (columnId, colDir) => emit("onColumnSort", columnId, colDir))
 				}, null, 8, ["col-sort-values", "sort-control-options"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "action-bar-left", {}, void 0, true)]),
-				createElementVNode("div", _hoisted_2$4, [isPreview.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "preview-label" }, "Preview", -1)), __props.actionState?.previewDescription ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
+				createElementVNode("div", _hoisted_2$3, [isPreview.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "preview-label" }, "Preview", -1)), __props.actionState?.previewDescription ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
 					key: 0,
 					content: __props.actionState.previewDescription
 				}, null, 8, ["content"])) : createCommentVNode("", true)])) : createCommentVNode("", true), __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true)]),
@@ -5556,87 +5736,6 @@ var columnHeaderActionButtons = ({ column, actionConfig, additionalMenuItems })
 });
 /** 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
-/**
-* Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
-*
-* @param fn
-*/
-function tryOnScopeDispose(fn, failSilently) {
-	if (getCurrentScope()) {
-		onScopeDispose(fn, failSilently);
-		return true;
-	}
-	return false;
-}
-var isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-//#endregion
-//#region ../../node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.40_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
-var defaultWindow = isClient ? window : void 0;
-isClient && window.document;
-isClient && window.navigator;
-isClient && window.location;
-/**
-* Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
-*
-* @see https://vueuse.org/useRafFn
-* @param fn
-* @param options
-*/
-function useRafFn(fn, options = {}) {
-	const { immediate = true, fpsLimit = null, window = defaultWindow, once = false } = options;
-	const isActive = shallowRef(false);
-	const intervalLimit = computed(() => {
-		const limit = toValue(fpsLimit);
-		return limit ? 1e3 / limit : null;
-	});
-	let previousFrameTimestamp = 0;
-	let rafId = null;
-	function loop(timestamp) {
-		if (!isActive.value || !window) return;
-		if (!previousFrameTimestamp) previousFrameTimestamp = timestamp;
-		const delta = timestamp - previousFrameTimestamp;
-		if (intervalLimit.value && delta < intervalLimit.value) {
-			rafId = window.requestAnimationFrame(loop);
-			return;
-		}
-		previousFrameTimestamp = timestamp;
-		fn({
-			delta,
-			timestamp
-		});
-		if (once) {
-			isActive.value = false;
-			rafId = null;
-			return;
-		}
-		rafId = window.requestAnimationFrame(loop);
-	}
-	function resume() {
-		if (!isActive.value && window) {
-			isActive.value = true;
-			previousFrameTimestamp = 0;
-			rafId = window.requestAnimationFrame(loop);
-		}
-	}
-	function pause() {
-		isActive.value = false;
-		if (rafId != null && window) {
-			window.cancelAnimationFrame(rafId);
-			rafId = null;
-		}
-	}
-	if (immediate) resume();
-	tryOnScopeDispose(pause);
-	return {
-		isActive: shallowReadonly(isActive),
-		pause,
-		resume
-	};
-}
-Number.POSITIVE_INFINITY;
 /**
 * While a column is being resized, this composable grows the dragged column and scrolls
 * the container to the right in lockstep whenever the pointer is near (or past) the
@@ -5691,7 +5790,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_2$3 = { class: "header-text-container" };
+var _hoisted_2$2 = { class: "header-text-container" };
 var _hoisted_3 = {
 	key: 0,
 	class: "sub-header-text-container"
@@ -5921,7 +6020,7 @@ var Header_vue_vue_type_script_lang_default = {
 							ref_key: "mainHeader",
 							ref: mainHeader,
 							class: "main-header"
-						}, [withDirectives((openBlock(), createElementBlock("div", _hoisted_2$3, [createElementVNode("span", {
+						}, [withDirectives((openBlock(), createElementBlock("div", _hoisted_2$2, [createElementVNode("span", {
 							ref_key: "headerText",
 							ref: headerText
 						}, toDisplayString(__props.column.header), 513)])), [[
@@ -6366,7 +6465,7 @@ var _hoisted_1$2 = {
 	ref: "cell-content",
 	class: "cell-content"
 };
-var _hoisted_2$2 = {
+var _hoisted_2$1 = {
 	key: 3,
 	class: "cell-text"
 };
@@ -6512,7 +6611,7 @@ var CellRenderer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}, [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), {
 				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$2, toDisplayString(__props.text), 1)), showCellExpandButton.value ? (openBlock(), createBlock(CellExpandButton_default, {
+			})) : __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, {
 				key: 4,
 				class: normalizeClass({ overlaid: __props.overlayExpandButton }),
 				toggled: isExpanded.value,
@@ -6623,7 +6722,7 @@ var _hoisted_1$1 = {
 	key: 0,
 	class: "deletion-cell"
 };
-var _hoisted_2$1 = {
+var _hoisted_2 = {
 	key: 2,
 	class: "action"
 };
@@ -6942,7 +7041,7 @@ var TableUI_vue_vue_type_script_lang_default = {
 								"onDataValueView"
 							]);
 						}), 128)),
-						filteredSubMenuItems.value?.length ? (openBlock(), createElementBlock("td", _hoisted_2$1, [createVNode(unref(KdsMenuButton), {
+						filteredSubMenuItems.value?.length ? (openBlock(), createElementBlock("td", _hoisted_2, [createVNode(unref(KdsMenuButton), {
 							modelValue: isMenuOpen.value,
 							"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isMenuOpen.value = $event),
 							ariaLabel: "More actions",
@@ -7210,7 +7309,7 @@ var TableUI_vue_vue_type_script_lang_default = {
 		},
 		emptyState: {
 			type: Object,
-			default: () => ({ headline: "No data" })
+			default: void 0
 		}
 	},
 	emits: {
@@ -7924,18 +8023,14 @@ var TableUI_vue_vue_type_script_lang_default = {
 //#endregion
 //#region src/components/TableUI.vue
 var _hoisted_1 = { class: "wrapper" };
-var _hoisted_2 = {
-	key: 0,
-	class: "empty-state-overlay"
-};
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_TableActionBar = resolveComponent("TableActionBar");
 	const _component_Row = resolveComponent("Row");
 	const _component_Header = resolveComponent("Header");
 	const _component_CellSelectionOverlay = resolveComponent("CellSelectionOverlay");
 	const _component_NewRowButton = resolveComponent("NewRowButton");
-	const _component_TableCore = resolveComponent("TableCore");
 	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, {
 		key: 0,
@@ -7982,225 +8077,225 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 			_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"]))
 		]
-	}, [
-		createVNode(_component_TableCore, {
-			ref: "tableCore",
-			"scroll-data": $options.scrollData,
-			"total-width": $setup.totalWidth,
-			"column-resize": { active: $setup.columnResizeActive },
+	}, [createVNode(_component_TableCore, {
+		ref: "tableCore",
+		"scroll-data": $options.scrollData,
+		"total-width": $setup.totalWidth,
+		"column-resize": { active: $setup.columnResizeActive },
+		"table-config": $props.tableConfig,
+		"sub-menu-config": $props.subMenuConfig,
+		"scroll-config": {
+			itemSize: $options.scrollerItemSize,
+			numRowsAbove: $props.numRowsAbove,
+			numRowsBelow: $props.numRowsBelow,
+			compact: Boolean($props.rowConfig.compactMode)
+		},
+		"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)),
+		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())
+	}, createSlots({
+		row: withCtx(({ row, groupInd, rowInd }) => [createVNode(_component_Row, {
+			ref: $options.getRowRefName(groupInd, rowInd),
+			"row-data": row,
+			row: $options.getRowData(row),
 			"table-config": $props.tableConfig,
 			"sub-menu-config": $props.subMenuConfig,
-			"scroll-config": {
-				itemSize: $options.scrollerItemSize,
-				numRowsAbove: $props.numRowsAbove,
-				numRowsBelow: $props.numRowsBelow,
-				compact: Boolean($props.rowConfig.compactMode)
-			},
-			"current-row-height": $options.currentRowHeight,
+			"show-drag-handle": $props.tableConfig.enableRowResizing,
+			columns: $props.columns,
+			"row-config": $props.rowConfig,
+			"row-height": $options.currentRowHeight,
+			"min-row-height": $options.minRowHeight,
+			"is-selected": $options.currentSelectionMap(rowInd, groupInd || 0),
+			"select-cells-on-move": $setup.selectCellsOnMove.state,
+			"disable-row-height-transition": $props.disableRowHeightTransition,
+			"selected-cell-index": $options.getCellIndex($setup.selectedCell, rowInd),
+			"cell-selection-range": $options.getCellSelectionRange(rowInd),
+			"to-be-expanded-cell-index": $options.getCellIndex($setup.toBeShownCell, rowInd),
+			"to-be-edited-cell-index": $options.getCellIndex($setup.editingCell, rowInd),
 			"new-column-button-width": $setup.newColumnButtonWidth,
-			onScrollerUpdate: $options.onScroll,
-			"onUpdate:availableWidth": _cache[8] || (_cache[8] = ($event) => _ctx.$emit("update:available-width", $event)),
-			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())
-		}, {
-			row: withCtx(({ row, groupInd, rowInd }) => [createVNode(_component_Row, {
-				ref: $options.getRowRefName(groupInd, rowInd),
-				"row-data": row,
-				row: $options.getRowData(row),
-				"table-config": $props.tableConfig,
-				"sub-menu-config": $props.subMenuConfig,
-				"show-drag-handle": $props.tableConfig.enableRowResizing,
-				columns: $props.columns,
-				"row-config": $props.rowConfig,
-				"row-height": $options.currentRowHeight,
-				"min-row-height": $options.minRowHeight,
-				"is-selected": $options.currentSelectionMap(rowInd, groupInd || 0),
-				"select-cells-on-move": $setup.selectCellsOnMove.state,
-				"disable-row-height-transition": $props.disableRowHeightTransition,
-				"selected-cell-index": $options.getCellIndex($setup.selectedCell, rowInd),
-				"cell-selection-range": $options.getCellSelectionRange(rowInd),
-				"to-be-expanded-cell-index": $options.getCellIndex($setup.toBeShownCell, rowInd),
-				"to-be-edited-cell-index": $options.getCellIndex($setup.editingCell, rowInd),
-				"new-column-button-width": $setup.newColumnButtonWidth,
-				onDeleteRow: () => $options.onDeleteRow(rowInd),
-				onRowSelect: ($event) => $options.onRowSelect($event, rowInd, groupInd || 0),
-				onCellSelect: (cellInd, ignoreIfSelected) => $options.onCellSelectRowEvent(cellInd, rowInd, groupInd, ignoreIfSelected),
-				onDataValueView: (cellInd, anchor) => $options.onDataValueView(cellInd, rowInd, anchor),
-				onExpandCellSelect: (cellInd) => $options.onExpandCellSelect(cellInd, rowInd, groupInd),
-				onRowInput: (event) => $options.onRowInput(event, rowInd, groupInd ?? 0, row),
-				onRowSubMenuClick: ($event) => $options.onRowSubMenuClick($event, row),
-				onResizeAllRows: (currentSize, row) => $options.onResizeAllRows(currentSize, row, rowInd),
-				onResizeRow: (rowSizeDelta) => $options.onResizeRow(rowSizeDelta, rowInd),
-				onVirtualColumnNav: (type, direction) => $options.onVirtualColumnNav(type, direction, rowInd, groupInd)
-			}, createSlots({
-				"editable-cell": withCtx(({ ind, cellElement }) => [renderSlot(_ctx.$slots, "editable-cell", {
+			onDeleteRow: () => $options.onDeleteRow(rowInd),
+			onRowSelect: ($event) => $options.onRowSelect($event, rowInd, groupInd || 0),
+			onCellSelect: (cellInd, ignoreIfSelected) => $options.onCellSelectRowEvent(cellInd, rowInd, groupInd, ignoreIfSelected),
+			onDataValueView: (cellInd, anchor) => $options.onDataValueView(cellInd, rowInd, anchor),
+			onExpandCellSelect: (cellInd) => $options.onExpandCellSelect(cellInd, rowInd, groupInd),
+			onRowInput: (event) => $options.onRowInput(event, rowInd, groupInd ?? 0, row),
+			onRowSubMenuClick: ($event) => $options.onRowSubMenuClick($event, row),
+			onResizeAllRows: (currentSize, row) => $options.onResizeAllRows(currentSize, row, rowInd),
+			onResizeRow: (rowSizeDelta) => $options.onResizeRow(rowSizeDelta, rowInd),
+			onVirtualColumnNav: (type, direction) => $options.onVirtualColumnNav(type, direction, rowInd, groupInd)
+		}, createSlots({
+			"editable-cell": withCtx(({ ind, cellElement }) => [renderSlot(_ctx.$slots, "editable-cell", {
+				rowInd,
+				colInd: ind,
+				initialValue: $setup.editingCellInitialValue,
+				cellElement,
+				onKeydown: _cache[2] || (_cache[2] = (event) => $setup.createEditingCellKeydownHandler({ moveSelection: $options.onKeyboardMoveSelectionFromEditingCell })(event)),
+				onClickAway: _cache[3] || (_cache[3] = (...args) => $setup.stopEditingCell && $setup.stopEditingCell(...args))
+			}, void 0, true)]),
+			_: 2
+		}, [renderList($options.slottedColumns, (colInd) => {
+			return {
+				name: $options.getCellContentSlotName($props.columns, colInd),
+				fn: withCtx((cellData) => [renderSlot(_ctx.$slots, `cellContent-${$props.columns[colInd].key}`, { data: {
+					...cellData,
+					key: $props.columns[colInd].key,
 					rowInd,
-					colInd: ind,
-					initialValue: $setup.editingCellInitialValue,
-					cellElement,
-					onKeydown: _cache[2] || (_cache[2] = (event) => $setup.createEditingCellKeydownHandler({ moveSelection: $options.onKeyboardMoveSelectionFromEditingCell })(event)),
-					onClickAway: _cache[3] || (_cache[3] = (...args) => $setup.stopEditingCell && $setup.stopEditingCell(...args))
-				}, void 0, true)]),
-				_: 2
-			}, [renderList($options.slottedColumns, (colInd) => {
-				return {
-					name: $options.getCellContentSlotName($props.columns, colInd),
-					fn: withCtx((cellData) => [renderSlot(_ctx.$slots, `cellContent-${$props.columns[colInd].key}`, { data: {
-						...cellData,
-						key: $props.columns[colInd].key,
-						rowInd,
-						colInd
-					} }, void 0, true)])
-				};
-			})]), 1032, [
-				"row-data",
-				"row",
-				"table-config",
-				"sub-menu-config",
-				"show-drag-handle",
-				"columns",
-				"row-config",
-				"row-height",
-				"min-row-height",
-				"is-selected",
-				"select-cells-on-move",
-				"disable-row-height-transition",
-				"selected-cell-index",
-				"cell-selection-range",
-				"to-be-expanded-cell-index",
-				"to-be-edited-cell-index",
-				"new-column-button-width",
-				"onDeleteRow",
-				"onRowSelect",
-				"onCellSelect",
-				"onDataValueView",
-				"onExpandCellSelect",
-				"onRowInput",
-				"onRowSubMenuClick",
-				"onResizeAllRows",
-				"onResizeRow",
-				"onVirtualColumnNav"
-			])]),
-			header: withCtx(({ getDragHandleHeight }) => [createVNode(_component_Header, {
-				ref: "header",
-				style: normalizeStyle({ width: `var(${$setup.BODY_WIDTH_CSS_VAR})` }),
-				"table-config": $props.tableConfig,
-				"action-config": $props.actionConfig,
-				columns: $props.columns,
-				"additional-header-menu-items": $props.additionalHeaderMenuItems,
-				"col-sort-values": $props.colSortValues,
-				"is-selected": Boolean($props.tableState.totalSelected),
-				"get-drag-handle-height": getDragHandleHeight,
-				class: normalizeClass(["table-header", { "sub-menu-active": $props.subMenuConfig.subMenuItems?.length }]),
-				"show-new-column-button": $setup.showNewColumnAndRowButton,
-				"selected-header-index": $options.selectedHeaderIndex,
-				onHeaderSelect: $options.onSelectAll,
-				onColumnSort: $options.onColumnSort,
-				onDeleteColumn: $options.onDeleteColumn,
-				onColumnResize: $options.onColumnResize,
-				onAllColumnsResize: $options.onAllColumnsResize,
-				onColumnResizeStart: $options.onColumnResizeStart,
-				onColumnResizeEnd: $options.onColumnResizeEnd,
-				onMoveDownFromHeaderCell: $options.onMoveDownFromHeaderCell,
-				onHeaderCellSelect: $options.onHeaderCellSelect,
-				onHeaderCellDeselect: $options.onHeaderCellDeselect,
-				onHeaderCellStartEditing: _cache[4] || (_cache[4] = (columnIndex, initialValue) => _ctx.$emit("headerCellStartEditing", columnIndex, initialValue)),
-				"onUpdate:newColumnButtonWidth": $options.onUpdateNewColumnButtonWidth,
-				onNewColumnButtonClick: $options.onNewColumnButtonClick,
-				onSelectionKeydownDown: _cache[5] || (_cache[5] = ($event) => $options.onHeaderSelectionKeydownDown()),
-				onNewColumnButtonKeydownLeft: _cache[6] || (_cache[6] = ($event) => $options.onMoveIntoBodyFromRight())
-			}, {
-				subHeader: withCtx((slotProps) => [renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
-				_: 3
-			}, 8, [
-				"style",
-				"table-config",
-				"action-config",
-				"columns",
-				"additional-header-menu-items",
-				"col-sort-values",
-				"is-selected",
-				"get-drag-handle-height",
-				"class",
-				"show-new-column-button",
-				"selected-header-index",
-				"onHeaderSelect",
-				"onColumnSort",
-				"onDeleteColumn",
-				"onColumnResize",
-				"onAllColumnsResize",
-				"onColumnResizeStart",
-				"onColumnResizeEnd",
-				"onMoveDownFromHeaderCell",
-				"onHeaderCellSelect",
-				"onHeaderCellDeselect",
-				"onUpdate:newColumnButtonWidth",
-				"onNewColumnButtonClick"
-			])]),
-			"cell-selection-overlay": withCtx(() => [$setup.rectMinMax && !$setup.isEditingCell && $options.selectedHeaderIndex === null ? (openBlock(), createBlock(_component_CellSelectionOverlay, {
-				key: 0,
-				ref: "selectionOverlay",
-				rect: $setup.rectMinMax,
-				"row-height": $options.scrollerItemSize,
-				"table-config": $props.tableConfig,
-				"row-resize-index": $data.currentResizedScrollIndex,
-				"row-resize-delta": $data.currentRowSizeDelta,
-				"cell-selection-rect-focus-corner": $setup.focusWithin ? $setup.selectedCell : void 0
-			}, null, 8, [
-				"rect",
-				"row-height",
-				"table-config",
-				"row-resize-index",
-				"row-resize-delta",
-				"cell-selection-rect-focus-corner"
-			])) : createCommentVNode("", true)]),
-			belowBody: withCtx(() => [$setup.showNewColumnAndRowButton ? (openBlock(), createBlock(_component_NewRowButton, {
-				key: 0,
-				ref: "new-row-button",
-				onClick: $options.onNewRowButtonClick,
-				onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
-				onKeydownUp: $options.onMoveIntoBodyFromBottom
-			}, null, 8, ["onClick", "onKeydownUp"])) : createCommentVNode("", true)]),
-			_: 3
-		}, 8, [
-			"scroll-data",
-			"total-width",
-			"column-resize",
+					colInd
+				} }, void 0, true)])
+			};
+		})]), 1032, [
+			"row-data",
+			"row",
 			"table-config",
 			"sub-menu-config",
-			"scroll-config",
-			"current-row-height",
+			"show-drag-handle",
+			"columns",
+			"row-config",
+			"row-height",
+			"min-row-height",
+			"is-selected",
+			"select-cells-on-move",
+			"disable-row-height-transition",
+			"selected-cell-index",
+			"cell-selection-range",
+			"to-be-expanded-cell-index",
+			"to-be-edited-cell-index",
 			"new-column-button-width",
-			"onScrollerUpdate",
-			"onMoveSelection",
-			"onClearSelection",
-			"onExpandSelectedCell",
-			"onStartEditing"
-		]),
-		$options.totalTableLength === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_KdsEmptyState, mergeProps({ class: "empty-state" }, $props.emptyState), null, 16)])) : createCommentVNode("", true),
-		$props.pageConfig && $props.pageState ? (openBlock(), createBlock(_component_PageControls, {
-			key: 1,
-			"page-config": $props.pageConfig,
+			"onDeleteRow",
+			"onRowSelect",
+			"onCellSelect",
+			"onDataValueView",
+			"onExpandCellSelect",
+			"onRowInput",
+			"onRowSubMenuClick",
+			"onResizeAllRows",
+			"onResizeRow",
+			"onVirtualColumnNav"
+		])]),
+		header: withCtx(({ getDragHandleHeight }) => [createVNode(_component_Header, {
+			ref: "header",
+			style: normalizeStyle({ width: `var(${$setup.BODY_WIDTH_CSS_VAR})` }),
+			"table-config": $props.tableConfig,
+			"action-config": $props.actionConfig,
+			columns: $props.columns,
+			"additional-header-menu-items": $props.additionalHeaderMenuItems,
+			"col-sort-values": $props.colSortValues,
+			"is-selected": Boolean($props.tableState.totalSelected),
+			"get-drag-handle-height": getDragHandleHeight,
+			class: normalizeClass(["table-header", { "sub-menu-active": $props.subMenuConfig.subMenuItems?.length }]),
+			"show-new-column-button": $setup.showNewColumnAndRowButton,
+			"selected-header-index": $options.selectedHeaderIndex,
+			onHeaderSelect: $options.onSelectAll,
+			onColumnSort: $options.onColumnSort,
+			onDeleteColumn: $options.onDeleteColumn,
+			onColumnResize: $options.onColumnResize,
+			onAllColumnsResize: $options.onAllColumnsResize,
+			onColumnResizeStart: $options.onColumnResizeStart,
+			onColumnResizeEnd: $options.onColumnResizeEnd,
+			onMoveDownFromHeaderCell: $options.onMoveDownFromHeaderCell,
+			onHeaderCellSelect: $options.onHeaderCellSelect,
+			onHeaderCellDeselect: $options.onHeaderCellDeselect,
+			onHeaderCellStartEditing: _cache[4] || (_cache[4] = (columnIndex, initialValue) => _ctx.$emit("headerCellStartEditing", columnIndex, initialValue)),
+			"onUpdate:newColumnButtonWidth": $options.onUpdateNewColumnButtonWidth,
+			onNewColumnButtonClick: $options.onNewColumnButtonClick,
+			onSelectionKeydownDown: _cache[5] || (_cache[5] = ($event) => $options.onHeaderSelectionKeydownDown()),
+			onNewColumnButtonKeydownLeft: _cache[6] || (_cache[6] = ($event) => $options.onMoveIntoBodyFromRight())
+		}, {
+			subHeader: withCtx((slotProps) => [renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+			_: 3
+		}, 8, [
+			"style",
+			"table-config",
+			"action-config",
+			"columns",
+			"additional-header-menu-items",
+			"col-sort-values",
+			"is-selected",
+			"get-drag-handle-height",
+			"class",
+			"show-new-column-button",
+			"selected-header-index",
+			"onHeaderSelect",
+			"onColumnSort",
+			"onDeleteColumn",
+			"onColumnResize",
+			"onAllColumnsResize",
+			"onColumnResizeStart",
+			"onColumnResizeEnd",
+			"onMoveDownFromHeaderCell",
+			"onHeaderCellSelect",
+			"onHeaderCellDeselect",
+			"onUpdate:newColumnButtonWidth",
+			"onNewColumnButtonClick"
+		])]),
+		"cell-selection-overlay": withCtx(() => [$setup.rectMinMax && !$setup.isEditingCell && $options.selectedHeaderIndex === null ? (openBlock(), createBlock(_component_CellSelectionOverlay, {
+			key: 0,
+			ref: "selectionOverlay",
+			rect: $setup.rectMinMax,
+			"row-height": $options.scrollerItemSize,
 			"table-config": $props.tableConfig,
-			"page-state": $props.pageState,
-			"table-state": $props.tableState,
-			onPageChange: $options.onPageChange,
-			onPageSizeUpdate: $options.onPageSizeUpdate
+			"row-resize-index": $data.currentResizedScrollIndex,
+			"row-resize-delta": $data.currentRowSizeDelta,
+			"cell-selection-rect-focus-corner": $setup.focusWithin ? $setup.selectedCell : void 0
 		}, null, 8, [
-			"page-config",
+			"rect",
+			"row-height",
 			"table-config",
-			"page-state",
-			"table-state",
-			"onPageChange",
-			"onPageSizeUpdate"
-		])) : createCommentVNode("", true)
-	], 544)]);
+			"row-resize-index",
+			"row-resize-delta",
+			"cell-selection-rect-focus-corner"
+		])) : createCommentVNode("", true)]),
+		belowBody: withCtx(() => [$setup.showNewColumnAndRowButton ? (openBlock(), createBlock(_component_NewRowButton, {
+			key: 0,
+			ref: "new-row-button",
+			onClick: $options.onNewRowButtonClick,
+			onPointerdown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
+			onKeydownUp: $options.onMoveIntoBodyFromBottom
+		}, null, 8, ["onClick", "onKeydownUp"])) : createCommentVNode("", true)]),
+		_: 2
+	}, [$props.emptyState ? {
+		name: "empty-state",
+		fn: withCtx(() => [createVNode(_component_KdsEmptyState, mergeProps({ class: "empty-state" }, $props.emptyState), null, 16)]),
+		key: "0"
+	} : void 0]), 1032, [
+		"scroll-data",
+		"total-width",
+		"column-resize",
+		"table-config",
+		"sub-menu-config",
+		"scroll-config",
+		"current-row-height",
+		"new-column-button-width",
+		"onScrollerUpdate",
+		"onMoveSelection",
+		"onClearSelection",
+		"onExpandSelectedCell",
+		"onStartEditing"
+	]), $props.pageConfig && $props.pageState ? (openBlock(), createBlock(_component_PageControls, {
+		key: 0,
+		"page-config": $props.pageConfig,
+		"table-config": $props.tableConfig,
+		"page-state": $props.pageState,
+		"table-state": $props.tableState,
+		onPageChange: $options.onPageChange,
+		onPageSizeUpdate: $options.onPageSizeUpdate
+	}, null, 8, [
+		"page-config",
+		"table-config",
+		"page-state",
+		"table-state",
+		"onPageChange",
+		"onPageSizeUpdate"
+	])) : createCommentVNode("", true)], 544)]);
 }
-var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-1941898e"]]);
+var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-83bc03a3"]]);
 //#endregion
 //#region src/components/composables/useTableReady.ts
 var useTableReady = ({ onReady }) => {