@knime/kds-table 6.3.1 → 6.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, shallowReadonly, shallowRef, toDisplayString, toRef, toValue, unref, useCssVars, useSlots, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { KdsButton, KdsCheckbox, KdsDropdown, KdsIcon, KdsLoadingSkeleton, KdsMenuButton, KdsMissingValueIcon, KdsPopover, KdsSearchInput, KdsToggleButton, vKdsTooltip } from "@knime/kds-components";
+import { KdsButton, KdsCheckbox, KdsDropdown, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLoadingSkeleton, KdsMenuButton, KdsMissingValueIcon, KdsPopover, KdsSearchInput, KdsToggleButton, vKdsTooltip } from "@knime/kds-components";
 import './index.css';//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -5000,9 +5000,9 @@ 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$7 = { class: "navigation-buttons" };
+var _hoisted_2$8 = { class: "navigation-buttons" };
 var _hoisted_3$4 = { class: "page-count" };
-var _hoisted_4$2 = { class: "navigation-buttons" };
+var _hoisted_4$3 = { class: "navigation-buttons" };
 //#endregion
 //#region src/components/control/PageNavigation.vue
 var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -5028,7 +5028,7 @@ var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$11, [
-				createElementVNode("div", _hoisted_2$7, [createVNode(unref(KdsButton), {
+				createElementVNode("div", _hoisted_2$8, [createVNode(unref(KdsButton), {
 					variant: "transparent",
 					size: "small",
 					"leading-icon": "chevron-left-double",
@@ -5044,7 +5044,7 @@ var PageNavigation_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					onClick: _cache[1] || (_cache[1] = ($event) => onPageChange(__props.currentPage - 1))
 				}, null, 8, ["disabled"])]),
 				createElementVNode("span", _hoisted_3$4, toDisplayString(__props.currentPage) + " of " + toDisplayString(__props.totalPages), 1),
-				createElementVNode("div", _hoisted_4$2, [createVNode(unref(KdsButton), {
+				createElementVNode("div", _hoisted_4$3, [createVNode(unref(KdsButton), {
 					variant: "transparent",
 					size: "small",
 					"leading-icon": "chevron-right",
@@ -5069,16 +5069,16 @@ var _hoisted_1$10 = {
 	key: 0,
 	class: "subtle"
 };
-var _hoisted_2$6 = {
+var _hoisted_2$7 = {
 	key: 1,
 	class: "row-range-container"
 };
 var _hoisted_3$3 = { class: "subtle" };
-var _hoisted_4$1 = {
+var _hoisted_4$2 = {
 	key: 0,
 	class: "muted"
 };
-var _hoisted_5 = { class: "subtle" };
+var _hoisted_5$1 = { class: "subtle" };
 //#endregion
 //#region src/components/control/PageControls.vue?vue&type=script&lang.ts
 /**
@@ -5110,10 +5110,10 @@ 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$10, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
 						createElementVNode("span", _hoisted_3$3, toDisplayString(__props.rowLabel) + ":", 1),
-						hasMultiplePages.value && __props.currentItems ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(pageRangeStart.value) + "–" + toDisplayString(pageRangeEnd.value), 1)) : createCommentVNode("", true),
-						createElementVNode("span", _hoisted_5, toDisplayString(rowCountText.value), 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)
 					]));
 				};
 			}
@@ -5179,7 +5179,7 @@ var _hoisted_1$9 = {
 	key: 0,
 	class: "page-controls"
 };
-var _hoisted_2$5 = { class: "page-size-menu" };
+var _hoisted_2$6 = { class: "page-size-menu" };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_PageRowRange = resolveComponent("PageRowRange");
 	const _component_PageNavigation = resolveComponent("PageNavigation");
@@ -5212,7 +5212,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
 			"has-next-page",
 			"has-previous-page"
 		])) : createCommentVNode("", true),
-		createElementVNode("div", _hoisted_2$5, [$options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
+		createElementVNode("div", _hoisted_2$6, [$options.pageSizeItems.length ? (openBlock(), createBlock(_component_KdsMenuButton, {
 			key: 0,
 			items: $options.pageSizeItems,
 			label: $options.createText($props.pageConfig.pageSize),
@@ -5232,10 +5232,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$4 = { class: "header" };
+var _hoisted_2$5 = { 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$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)])]);
 }
 var PopoverContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render$3], ["__scopeId", "data-v-349cd3ba"]]);
 //#endregion
@@ -5374,11 +5374,16 @@ 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$3 = {
+var _hoisted_2$4 = { class: "center" };
+var _hoisted_3$1 = {
 	key: 0,
+	class: "preview"
+};
+var _hoisted_4$1 = {
+	key: 1,
 	class: "dimension"
 };
-var _hoisted_3$1 = { class: "right" };
+var _hoisted_5 = { class: "right" };
 //#endregion
 //#region src/components/control/TableActionBar.vue
 var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -5404,6 +5409,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const slots = useSlots();
 		const viewType = computed(() => __props.actionState?.viewType ?? "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"]));
 		/**
@@ -5427,43 +5433,46 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			return hasContent.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(["kds-table-action-bar", { "temporary-view": isTemporaryView.value }])
-			}, [createElementVNode("div", _hoisted_1$6, [
-				__props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true),
-				__props.actionConfig.enableSorting ? (openBlock(), createBlock(SortControl_default, {
-					key: 1,
+			}, [
+				createElementVNode("div", _hoisted_1$6, [__props.actionConfig.enableSorting && !__props.actionConfig.hideSortingButton ? (openBlock(), createBlock(SortControl_default, {
+					key: 0,
 					"col-sort-values": __props.colSortValues,
 					"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_3$1, [
-				__props.actionConfig.enableSearch ? (openBlock(), createBlock(unref(KdsSearchInput), {
+				}, 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), {
 					key: 0,
-					ariaLabel: "Search table",
-					size: "small",
-					"model-value": __props.actionState?.searchTerm ?? "",
-					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:searchTerm", $event))
-				}, null, 8, ["model-value"])) : createCommentVNode("", true),
-				__props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(KdsMenuButton), {
-					key: 1,
-					ariaLabel: "Table settings",
-					size: "small",
-					variant: "transparent",
-					"leading-icon": "parameter",
-					items: __props.actionConfig.settingsItems
-				}, null, 8, ["items"])) : createCommentVNode("", true),
-				showResetButton.value ? (openBlock(), createBlock(unref(KdsButton), {
-					key: 2,
-					ariaLabel: "Reset to Nodeoutput",
-					size: "small",
-					variant: "transparent",
-					"leading-icon": "x-close",
-					onClick: _cache[2] || (_cache[2] = ($event) => emit("resetTemporaryView"))
-				})) : createCommentVNode("", true)
-			])], 2)) : createCommentVNode("", true);
+					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)]),
+				createElementVNode("div", _hoisted_5, [
+					__props.actionConfig.enableSearch ? (openBlock(), createBlock(unref(KdsSearchInput), {
+						key: 0,
+						ariaLabel: "Search table",
+						size: "small",
+						"model-value": __props.actionState?.searchTerm ?? "",
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:searchTerm", $event))
+					}, null, 8, ["model-value"])) : createCommentVNode("", true),
+					__props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(KdsMenuButton), {
+						key: 1,
+						ariaLabel: "Table settings",
+						size: "small",
+						variant: "transparent",
+						"leading-icon": "parameter",
+						items: __props.actionConfig.settingsItems
+					}, null, 8, ["items"])) : createCommentVNode("", true),
+					showResetButton.value ? (openBlock(), createBlock(unref(KdsButton), {
+						key: 2,
+						ariaLabel: "Reset table",
+						size: "small",
+						variant: "transparent",
+						"leading-icon": "x-close",
+						onClick: _cache[2] || (_cache[2] = ($event) => emit("resetTemporaryView"))
+					})) : createCommentVNode("", true)
+				])
+			], 2)) : createCommentVNode("", true);
 		};
 	}
-}), [["__scopeId", "data-v-6538127c"]]);
+}), [["__scopeId", "data-v-c9fae4f1"]]);
 //#endregion
 //#region src/components/composables/useHeaderMenuItems.ts
 var useHeaderMenuItems = ({ enableSorting, sortDirection, sortTexts, additionalMenuItems, onColumnSort }) => {
@@ -5640,7 +5649,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$2 = { class: "header-text-container" };
+var _hoisted_2$3 = { class: "header-text-container" };
 var _hoisted_3 = {
 	key: 0,
 	class: "sub-header-text-container"
@@ -5853,7 +5862,7 @@ var Header_vue_vue_type_script_lang_default = {
 							ref_key: "mainHeader",
 							ref: mainHeader,
 							class: "main-header"
-						}, [withDirectives((openBlock(), createElementBlock("div", _hoisted_2$2, [createElementVNode("span", {
+						}, [withDirectives((openBlock(), createElementBlock("div", _hoisted_2$3, [createElementVNode("span", {
 							ref_key: "headerText",
 							ref: headerText
 						}, toDisplayString(__props.column.header), 513)])), [[
@@ -6206,7 +6215,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-5ec89e0d"]]);
+var Header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Header_vue_vue_type_script_lang_default, [["render", _sfc_render$2], ["__scopeId", "data-v-fc0a0ecb"]]);
 //#endregion
 //#region src/components/layout/NewRowButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "sticky-container" };
@@ -6262,7 +6271,7 @@ var _hoisted_1$2 = {
 	ref: "cell-content",
 	class: "cell-content"
 };
-var _hoisted_2$1 = {
+var _hoisted_2$2 = {
 	key: 3,
 	class: "cell-text"
 };
@@ -6408,7 +6417,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$1, 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$2, toDisplayString(__props.text), 1)), showCellExpandButton.value ? (openBlock(), createBlock(CellExpandButton_default, {
 				key: 4,
 				class: normalizeClass({ overlaid: __props.overlayExpandButton }),
 				toggled: isExpanded.value,
@@ -6519,7 +6528,7 @@ var _hoisted_1$1 = {
 	key: 0,
 	class: "deletion-cell"
 };
-var _hoisted_2 = {
+var _hoisted_2$1 = {
 	key: 2,
 	class: "action"
 };
@@ -6838,7 +6847,7 @@ var TableUI_vue_vue_type_script_lang_default = {
 								"onDataValueView"
 							]);
 						}), 128)),
-						filteredSubMenuItems.value?.length ? (openBlock(), createElementBlock("td", _hoisted_2, [createVNode(unref(KdsMenuButton), {
+						filteredSubMenuItems.value?.length ? (openBlock(), createElementBlock("td", _hoisted_2$1, [createVNode(unref(KdsMenuButton), {
 							modelValue: isMenuOpen.value,
 							"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isMenuOpen.value = $event),
 							ariaLabel: "More actions",
@@ -7000,7 +7009,8 @@ var TableUI_vue_vue_type_script_lang_default = {
 		}), [["__scopeId", "data-v-e925d8f8"]]),
 		TableCore: TableCore_default,
 		NewRowButton: NewRowButton_default,
-		TableActionBar: TableActionBar_default
+		TableActionBar: TableActionBar_default,
+		KdsEmptyState
 	},
 	props: {
 		/**
@@ -7102,6 +7112,10 @@ var TableUI_vue_vue_type_script_lang_default = {
 		disableRowHeightTransition: {
 			type: Boolean,
 			default: false
+		},
+		emptyState: {
+			type: Object,
+			default: () => ({ headline: "No data" })
 		}
 	},
 	emits: {
@@ -7293,6 +7307,10 @@ var TableUI_vue_vue_type_script_lang_default = {
 		};
 	},
 	computed: {
+		showActionBar() {
+			const viewType = this.actionState?.viewType;
+			return Boolean(this.actionConfig) || viewType === "TEMP_VIEW" || viewType === "PREVIEW";
+		},
 		minRowHeight() {
 			return this.rowConfig.compactMode ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
 		},
@@ -7811,6 +7829,10 @@ 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");
@@ -7818,14 +7840,15 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_CellSelectionOverlay = resolveComponent("CellSelectionOverlay");
 	const _component_NewRowButton = resolveComponent("NewRowButton");
 	const _component_TableCore = resolveComponent("TableCore");
+	const _component_KdsEmptyState = resolveComponent("KdsEmptyState");
 	const _component_PageControls = resolveComponent("PageControls");
-	return openBlock(), createElementBlock("div", _hoisted_1, [$props.actionConfig ? (openBlock(), createBlock(_component_TableActionBar, {
+	return openBlock(), createElementBlock("div", _hoisted_1, [$options.showActionBar ? (openBlock(), createBlock(_component_TableActionBar, {
 		key: 0,
 		"table-sizes": $props.tableState.tableSizes,
 		"action-state": $props.actionState,
 		"row-label": $props.tableConfig.rowLabel,
 		"show-table-size": $props.tableConfig.showTableSize,
-		"action-config": $props.actionConfig,
+		"action-config": $props.actionConfig ?? {},
 		"col-sort-values": $props.colSortValues,
 		"sort-control-options": $options.sortControlOptions,
 		onResetTemporaryView: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("resetTemporaryView")),
@@ -7864,221 +7887,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 },
-		"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())
-	}, {
-		row: withCtx(({ row, groupInd, rowInd }) => [createVNode(_component_Row, {
-			ref: $options.getRowRefName(groupInd, rowInd),
-			"row-data": row,
-			row: $options.getRowData(row),
+	}, [
+		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,
-			"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),
+			"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,
-			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
-				} }, 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())
+			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())
 		}, {
-			subHeader: withCtx((slotProps) => [renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+			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", {
+					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, [
-			"style",
+			"scroll-data",
+			"total-width",
+			"column-resize",
 			"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,
+			"sub-menu-config",
+			"scroll-config",
+			"current-row-height",
+			"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,
 			"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
+			"page-state": $props.pageState,
+			"table-state": $props.tableState,
+			onPageChange: $options.onPageChange,
+			onPageSizeUpdate: $options.onPageSizeUpdate
 		}, null, 8, [
-			"rect",
-			"row-height",
+			"page-config",
 			"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",
-		"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)]);
+			"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-d531fa0a"]]);
+var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-1941898e"]]);
 //#endregion
 //#region src/components/composables/useTableReady.ts
 var useTableReady = ({ onReady }) => {