@knime/kds-table 0.2.2 → 0.3.1

package/dist/index.js

@@ -1,74 +1,6 @@
-import { computed, unref, watch, ref, isRef, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, shallowRef, toValue, readonly, createPropsRestProxy, useModel, createBlock, mergeProps, mergeModels, useTemplateRef, watchEffect, nextTick, withCtx, createVNode, useAttrs, useId, Fragment, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, resolveComponent, withKeys, normalizeStyle, renderList, onUnmounted, defineAsyncComponent, resolveDynamicComponent, h as h$1, useSlots, markRaw, createTextVNode, toRef, useCssVars, onBeforeUnmount, reactive, createSlots, normalizeProps, guardReactiveProps } from 'vue';
+import { computed, unref, watch, ref, isRef, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, inject, provide, defineComponent, openBlock, createElementBlock, withModifiers, renderSlot, shallowRef, toValue, readonly, createPropsRestProxy, useModel, createBlock, mergeProps, mergeModels, useTemplateRef, watchEffect, withCtx, createVNode, createCommentVNode, useAttrs, useId, Fragment, normalizeClass, createElementVNode, toDisplayString, resolveComponent, withKeys, normalizeStyle, renderList, onUnmounted, defineAsyncComponent, nextTick, resolveDynamicComponent, h as h$1, useSlots, markRaw, createTextVNode, toRef, useCssVars, onBeforeUnmount, reactive, createSlots, normalizeProps, guardReactiveProps } from 'vue';
 
-import './index.css';const defaultTimeFilter = "All time";
-const checkTimeFilter = (inDateString, timeFilterConfig) => {
-  try {
-    const now = /* @__PURE__ */ new Date();
-    if (typeof inDateString !== "string" || !("getFn" in timeFilterConfig) || !("setFn" in timeFilterConfig) || !("val" in timeFilterConfig)) {
-      return true;
-    }
-    const utcDateTime = inDateString.split(".")[0];
-    const di = new Date(utcDateTime);
-    if (!(di instanceof Date) || Number.isNaN(di.getTime())) {
-      return true;
-    }
-    const timeBoundsMs = now[timeFilterConfig.setFn](
-      now[timeFilterConfig.getFn]() - timeFilterConfig.val
-    );
-    return di.getTime() - timeBoundsMs >= 0;
-  } catch (_err) {
-    return true;
-  }
-};
-const tableTimeFilters = {
-  "Last day": {
-    getFn: "getDate",
-    setFn: "setDate",
-    val: 1
-  },
-  "Last week": {
-    getFn: "getDate",
-    setFn: "setDate",
-    val: 7
-  },
-  "Last month": {
-    getFn: "getMonth",
-    setFn: "setMonth",
-    val: 1
-  },
-  "Last 3 months": {
-    getFn: "getMonth",
-    setFn: "setMonth",
-    val: 3
-  },
-  "Last 6 months": {
-    getFn: "getMonth",
-    setFn: "setMonth",
-    val: 6
-  },
-  "Last year": {
-    getFn: "getFullYear",
-    setFn: "setFullYear",
-    val: 1
-  },
-  "All time": {}
-};
-const months = {
-  1: "Jan.",
-  2: "Feb.",
-  3: "Mar.",
-  4: "Apr.",
-  5: "May",
-  6: "June",
-  7: "July",
-  8: "Aug.",
-  9: "Sept.",
-  10: "Oct.",
-  11: "Nov.",
-  12: "Dec."
-};
-
-const defaultPageSize = 10;
+import './index.css';const defaultPageSize = 10;
 const tablePageSizes = [5, 10, 25, 50, 100];
 const filterComponents = {
   Multiselect: {
@@ -150,76 +82,12 @@ const columnSortText = {
     descending: "Descending"
   }
 };
-const valueTypeFormatters = {
-  Nominal: (val) => val,
-  String: (val) => val,
-  DateTime: (val) => {
-    try {
-      const separator = val.includes(".") ? "." : "+";
-      const utcDateTime = val.split(separator)[0];
-      const di = new Date(utcDateTime);
-      const hrdp = {
-        month: di.getMonth() + 1,
-        day: di.getDate(),
-        year: di.getFullYear(),
-        hour: di.getHours(),
-        minute: di.getMinutes()
-      };
-      if (Object.values(hrdp).some((part) => !part && part !== 0)) {
-        throw new SyntaxError("Can't parse date.");
-      }
-      const pad2 = (val2) => val2.toString().padStart(2, "0");
-      return (
-        // @ts-expect-error - we know that month is a valid index for the months array
-        `${months[hrdp.month]} ${pad2(hrdp.day)}, ${hrdp.year}, ${pad2(hrdp.hour)}:${pad2(hrdp.minute)}`
-      );
-    } catch (_error) {
-      return val;
-    }
-  },
-  Number: (val) => val?.toString(),
-  Boolean: (val) => val?.toString(),
-  Array: (val) => val?.length ? `${val.length} items` : "-",
-  Object: (val) => val ? `${Object.keys(val).length} items` : "-"
-};
-const typeFormatters = (type) => (val) => valueTypeFormatters[type](val);
-
-const isNonEmptyObject = (val) => val !== null && typeof val === "object" && Object.getOwnPropertyNames(val).length > 0;
-const isObjectRepresentation = (val) => {
-  const possibleKeys = ["value", "metadata", "color"];
-  return isNonEmptyObject(val) && Object.getOwnPropertyNames(val).every((key) => possibleKeys.includes(key));
-};
-const unpackObjectRepresentation = (val) => {
-  if (isObjectRepresentation(val)) {
-    if (val.hasOwnProperty("metadata") && !val.hasOwnProperty("value")) {
-      return null;
-    }
-    return val.value;
-  }
-  return val;
-};
-const getColor = (val) => {
-  if (isObjectRepresentation(val) && val.hasOwnProperty("color")) {
-    const color = val.color;
-    return typeof color === "undefined" ? null : color;
-  }
-  return null;
-};
-const isMissingValue = (val) => val === null || isObjectRepresentation(val) && val?.hasOwnProperty("metadata");
-const getMissingValueMessage = (cellData) => {
-  const metadata = cellData?.metadata;
-  const missingValueMsg = typeof metadata === "string" ? ` (${metadata})` : "";
-  return `Missing Value${missingValueMsg}`;
-};
-const isEmpty = (val) => typeof unpackObjectRepresentation(val) === "undefined";
-const getPropertiesFromColumns = (columnConfigs, key) => columnConfigs.map((colConfig) => colConfig[key]);
 
 const kdsCoreBorderWidthXs = 1;
 const kdsDimensionComponentHeight1p75x = 28;
 const kdsDimensionComponentHeight2p5x = 40;
 const kdsDimensionComponentWidth1x = 16;
 const kdsDimensionComponentWidth2x = 32;
-const kdsSpacingContainer0p10x = 1;
 const kdsSpacingContainer0p37x = 6;
 const kdsSpacingContainer0p5x = 8;
 const kdsSpacingContainer0p75x = 12;
@@ -235,7 +103,6 @@ const COMPACT_ROW_PADDING_TOP_BOTTOM = kdsSpacingContainer0p37x;
 const CELL_PADDING_HORIZONTAL = kdsSpacingContainer0p5x;
 const MIN_ROW_HEIGHT = COMPACT_ROW_HEIGHT;
 const HEADER_HEIGHT = kdsDimensionComponentHeight2p5x + 2 * kdsCoreBorderWidthXs;
-const MAX_SUB_MENU_WIDTH = 160;
 const ENABLE_SCROLL_AFTER_ROW_RESIZE_DELAY = 100;
 const COLUMN_RESIZE_DRAG_HANDLE_WIDTH = 5;
 const EXPAND_BUTTON_WIDTH = kdsDimensionComponentWidth1x;
@@ -248,6 +115,35 @@ const constants = {
   CELL_PADDING_HORIZONTAL
 };
 
+const isNonEmptyObject = (val) => val !== null && typeof val === "object" && Object.getOwnPropertyNames(val).length > 0;
+const isObjectRepresentation = (val) => {
+  const possibleKeys = ["value", "metadata", "color"];
+  return isNonEmptyObject(val) && Object.getOwnPropertyNames(val).every((key) => possibleKeys.includes(key));
+};
+const unpackObjectRepresentation = (val) => {
+  if (isObjectRepresentation(val)) {
+    if (val.hasOwnProperty("metadata") && !val.hasOwnProperty("value")) {
+      return null;
+    }
+    return val.value;
+  }
+  return val;
+};
+const getColor = (val) => {
+  if (isObjectRepresentation(val) && val.hasOwnProperty("color")) {
+    const color = val.color;
+    return typeof color === "undefined" ? null : color;
+  }
+  return null;
+};
+const isMissingValue = (val) => val === null || isObjectRepresentation(val) && val?.hasOwnProperty("metadata");
+const getMissingValueMessage = (cellData) => {
+  const metadata = cellData?.metadata;
+  const missingValueMsg = typeof metadata === "string" ? ` (${metadata})` : "";
+  return `Missing Value${missingValueMsg}`;
+};
+const getPropertiesFromColumns = (columnConfigs, key) => columnConfigs.map((colConfig) => colConfig[key]);
+
 var B$1 = Object.defineProperty;
 var b$1 = (t, e, r) => e in t ? B$1(t, e, { enumerable: true, configurable: true, writable: true, value: r }) : t[e] = r;
 var u$1 = (t, e, r) => b$1(t, typeof e != "symbol" ? e + "" : e, r);
@@ -507,8 +403,8 @@ const getMetaOrCtrlKey = () => {
 
 const injectionKey$4 = /* @__PURE__ */ Symbol("dataValueViewsIsShown");
 const useDataValueViews = () => inject(injectionKey$4);
-const provideDataValueViewsIsShown = (tableConfig, closeDataValueView) => provide(injectionKey$4, {
-  isShown: computed(() => Boolean(tableConfig.value.dataValueViewIsShown)),
+const provideDataValueViewsIsShown = (tableState, closeDataValueView) => provide(injectionKey$4, {
+  isShown: computed(() => Boolean(tableState.value.dataValueViewIsShown)),
   close: closeDataValueView
 });
 
@@ -538,7 +434,7 @@ const useStartEditingKeydown = ({
   return { onKeydown };
 };
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "TableBodyNavigatable",
   emits: ["moveSelection", "clearSelection", "expandSelectedCell", "startEditing", "bodyFocusin", "bodyFocusout"],
   setup(__props, { emit: __emit }) {
@@ -621,7 +517,7 @@ const _export_sfc$1 = (sfc, props) => {
   return target;
 };
 
-const TableBodyNavigatable = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["__scopeId", "data-v-70f2c330"]]);
+const TableBodyNavigatable = /* @__PURE__ */ _export_sfc$1(_sfc_main$p, [["__scopeId", "data-v-70f2c330"]]);
 
 //#endregion
 //#region tryOnScopeDispose/index.ts
@@ -851,14 +747,14 @@ const kdsAvatarSize = {
   XLARGE: "xlarge"
 };
 
-const _hoisted_1$15 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$H = ["src"];
-const _hoisted_3$u = {
+const _hoisted_1$18 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
+const _hoisted_2$J = ["src"];
+const _hoisted_3$v = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$1G = /* @__PURE__ */ defineComponent({
+const _sfc_main$1J = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -922,10 +818,10 @@ const _sfc_main$1G = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$H)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        }, null, 40, _hoisted_2$J)) : (openBlock(), createElementBlock("div", _hoisted_3$v, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$15);
+      ], 10, _hoisted_1$18);
     };
   }
 });
@@ -938,7 +834,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-9e1a5abe"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["__scopeId", "data-v-9e1a5abe"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -995,7 +891,7 @@ function useIcon({
   };
 }
 
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+const _sfc_main$1H = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -1025,7 +921,7 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-bff4f419"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1H, [["__scopeId", "data-v-bff4f419"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -1364,8 +1260,8 @@ Object.fromEntries(
   typeIconNames.map((name) => [toEnumKey(name), name])
 );
 
-const _hoisted_1$13 = ["title"];
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$16 = ["title"];
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -1406,12 +1302,12 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$13);
+      ], 10, _hoisted_1$16);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-38e9537f"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-38e9537f"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral"};
@@ -1419,8 +1315,8 @@ const kdsBadgeSize = {
   XSMALL: "xsmall"
 };
 
-const _hoisted_1$12 = { class: "label-wrapper" };
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$15 = { class: "label-wrapper" };
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -1442,24 +1338,24 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$12, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$15, toDisplayString(__props.label), 1)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-df64f7cf"]]);
 const kdsColorSwatchSize = {
   SMALL: "small"};
 
-const _hoisted_1$10 = ["role", "title", "aria-hidden", "aria-label"];
+const _hoisted_1$13 = ["role", "title", "aria-hidden", "aria-label"];
 const RGBA_SHORT_HEX_LENGTH = 4;
 const RGBA_LONG_HEX_LENGTH = 8;
 const ALPHA_NIBBLE_INDEX = 3;
 const ALPHA_BYTE_START = 6;
 const RGB_SHORT_HEX_LENGTH = 3;
 const RGB_LONG_HEX_LENGTH = 6;
-const _sfc_main$1A = /* @__PURE__ */ defineComponent({
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "KdsColorSwatch",
   props: {
     color: {},
@@ -1534,12 +1430,12 @@ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(swatchStyle.value),
         "aria-hidden": hasTitle.value ? void 0 : "true",
         "aria-label": hasTitle.value ? accessibleTitle.value : void 0
-      }, null, 14, _hoisted_1$10);
+      }, null, 14, _hoisted_1$13);
     };
   }
 });
 
-const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-91e0130d"]]);
+const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-91e0130d"]]);
 
 ref(false);
 
@@ -1573,9 +1469,9 @@ function useKdsIsTruncated(elementRef) {
   return { isTruncated };
 }
 
-const _hoisted_1$$ = ["title", "aria-label"];
-const _hoisted_2$E = ["title"];
-const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$12 = ["title", "aria-label"];
+const _hoisted_2$G = ["title"];
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "KdsLiveStatus",
   props: {
     status: { default: "red" },
@@ -1594,7 +1490,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["kds-live-status", __props.status, `size-${__props.size}`]),
         role: "img",
-        title: accessibleTitle.value,
+        title: !__props.label ? accessibleTitle.value : void 0,
         "aria-label": accessibleTitle.value
       }, [
         _cache[0] || (_cache[0] = createElementVNode("span", { class: "dot" }, null, -1)),
@@ -1604,16 +1500,16 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? __props.label : void 0
-        }, toDisplayString(__props.label), 9, _hoisted_2$E)) : createCommentVNode("", true)
-      ], 10, _hoisted_1$$);
+        }, toDisplayString(__props.label), 9, _hoisted_2$G)) : createCommentVNode("", true)
+      ], 10, _hoisted_1$12);
     };
   }
 });
 
-const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-01555495"]]);
+const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-f20c5c00"]]);
 
-const _hoisted_1$_ = ["data-style"];
-const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$11 = ["data-style"];
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -1638,14 +1534,14 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1$_);
+      ])], 10, _hoisted_1$11);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-54835dc0"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-54835dc0"]]);
 
-const _sfc_main$1w = /* @__PURE__ */ defineComponent({
+const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "KdsMissingValueIcon",
   props: {
     size: {}
@@ -1661,22 +1557,22 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-df682150"]]);
+const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-df682150"]]);
 
-const _sfc_main$1u = {  };
+const _sfc_main$1x = {  };
 
-const _hoisted_1$X = { class: "kds-divider" };
+const _hoisted_1$_ = { class: "kds-divider" };
 
 function _sfc_render$1$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("hr", _hoisted_1$X))
+  return (openBlock(), createElementBlock("hr", _hoisted_1$_))
 }
-const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1u, [['render',_sfc_render$1$1],['__scopeId',"data-v-4d059bd3"]]);
+const KdsDivider = /*#__PURE__*/_export_sfc(_sfc_main$1x, [['render',_sfc_render$1$1],['__scopeId',"data-v-4d059bd3"]]);
 
-const _hoisted_1$W = {
+const _hoisted_1$Z = {
   key: 0,
   class: "label"
 };
-const _sfc_main$1t = /* @__PURE__ */ defineComponent({
+const _sfc_main$1w = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     dataTestId: {},
@@ -1740,7 +1636,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$W, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$Z, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -1753,9 +1649,9 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-24ade73a"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-24ade73a"]]);
 
-const _sfc_main$1s = /* @__PURE__ */ defineComponent({
+const _sfc_main$1v = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     dataTestId: {},
@@ -1821,7 +1717,7 @@ function isExternalUrl(url) {
   return true;
 }
 
-const _sfc_main$1r = /* @__PURE__ */ defineComponent({
+const _sfc_main$1u = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     dataTestId: {},
@@ -1872,7 +1768,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$1p = /* @__PURE__ */ defineComponent({
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     dataTestId: {},
@@ -2129,7 +2025,7 @@ const useStableItemIds = (options) => {
   return { itemsWithPrefix, idPrefix, toUnprefixedId };
 };
 
-const _sfc_main$1n = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   __name: "ListItemAccessory",
   props: {
     accessory: {},
@@ -2175,14 +2071,14 @@ const kdsListItemAccessorySize = {
   LARGE: "large"
 };
 
-const _hoisted_1$T = ["id", "role", "aria-selected", "aria-disabled"];
-const _hoisted_2$z = {
+const _hoisted_1$W = ["id", "role", "aria-selected", "aria-disabled"];
+const _hoisted_2$B = {
   key: 0,
   class: "accessory"
 };
-const _hoisted_3$q = { class: "content" };
-const _hoisted_4$m = ["title"];
-const _hoisted_5$c = {
+const _hoisted_3$r = { class: "content" };
+const _hoisted_4$n = ["title"];
+const _hoisted_5$d = {
   key: 0,
   class: "prefix"
 };
@@ -2196,7 +2092,7 @@ const _hoisted_9$2 = {
   key: 3,
   class: "trailing-item-reserve-space"
 };
-const _sfc_main$1m = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   __name: "KdsListItem",
   props: {
     id: {},
@@ -2254,25 +2150,25 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
         ]),
         onClick
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$z, [
-          createVNode(_sfc_main$1n, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$B, [
+          createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: accessorySize.value,
             disabled: __props.disabled
           }, null, 8, ["accessory", "size", "disabled"])
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_3$q, [
+        createElementVNode("span", _hoisted_3$r, [
           createElementVNode("span", {
             ref_key: "labelEl",
             ref: labelEl,
             class: "label",
             title: unref(isLabelTruncated) ? props.text : void 0
           }, [
-            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$c, "(Missing) ")) : createCommentVNode("", true),
+            __props.missing ? (openBlock(), createElementBlock("span", _hoisted_5$d, "(Missing) ")) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass({ special: __props.special })
             }, toDisplayString(props.text), 3)
-          ], 8, _hoisted_4$m),
+          ], 8, _hoisted_4$n),
           props.subText ? (openBlock(), createElementBlock("span", {
             key: 0,
             ref_key: "subtextEl",
@@ -2295,20 +2191,20 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])) : createCommentVNode("", true),
           !props.shortcut && !props.trailingIcon && !props.badge ? (openBlock(), createElementBlock("span", _hoisted_9$2)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$T);
+      ], 10, _hoisted_1$W);
     };
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-a3d6c86f"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
 
-const _hoisted_1$S = { class: "kds-list-item-section-title" };
-const _hoisted_2$y = {
+const _hoisted_1$V = { class: "kds-list-item-section-title" };
+const _hoisted_2$A = {
   key: 0,
   class: "icon"
 };
-const _hoisted_3$p = ["title"];
-const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+const _hoisted_3$q = ["title"];
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   __name: "ListItemSectionTitle",
   props: {
     label: {},
@@ -2319,8 +2215,8 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$S, [
-        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$y, [
+      return openBlock(), createElementBlock("div", _hoisted_1$V, [
+        props.leadingIcon ? (openBlock(), createElementBlock("span", _hoisted_2$A, [
           createVNode(KdsIcon, {
             name: props.leadingIcon,
             size: "small"
@@ -2331,15 +2227,15 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
           ref: labelEl,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_3$p)
+        }, toDisplayString(props.label), 9, _hoisted_3$q)
       ]);
     };
   }
 });
 
-const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-5eeb1226"]]);
+const ListItemSectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-5eeb1226"]]);
 
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuItem",
   props: {
     item: {},
@@ -2509,14 +2405,14 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-96d9cfba"]]);
+const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__scopeId", "data-v-96d9cfba"]]);
 
 const ContainerDepthKey = /* @__PURE__ */ Symbol("ContainerDepth");
 const ChildItemKey = /* @__PURE__ */ Symbol("ChildItem");
 
-const _hoisted_1$R = ["id", "aria-label", "aria-activedescendant"];
-const _hoisted_2$x = ["id"];
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _hoisted_1$U = ["id", "aria-label", "aria-activedescendant"];
+const _hoisted_2$z = ["id"];
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   __name: "KdsMenuContainer",
   props: {
     id: {},
@@ -2742,28 +2638,28 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
                   items: item.children ?? [],
                   onItemClick: _cache[0] || (_cache[0] = ($event) => emit("itemClick", $event))
                 }, null, 8, ["id", "ariaLabel", "items"])
-              ], 44, _hoisted_2$x)
+              ], 44, _hoisted_2$z)
             ]),
             _: 2
           }, 1032, ["item", "is-last", "active-id", "variant", "onClick", "onMouseenter"]);
         }), 128))
-      ], 44, _hoisted_1$R);
+      ], 44, _hoisted_1$U);
     };
   }
 });
 
-const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-9dc6d3f6"]]);
+const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-ae4f1dab"]]);
 
 const kdsPopoverPlacement = {
   CUSTOM: "custom"
 };
 
-const _hoisted_1$Q = ["id", "popover", "role"];
-const _hoisted_2$w = {
+const _hoisted_1$T = ["id", "popover", "role"];
+const _hoisted_2$y = {
   key: 0,
   class: "kds-popover-default-content"
 };
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "KdsPopover",
   props: /* @__PURE__ */ mergeModels({
     role: {},
@@ -2821,16 +2717,16 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
         onToggle
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$w, toDisplayString(props.content), 1)) : createCommentVNode("", true)
+          props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$y, toDisplayString(props.content), 1)) : createCommentVNode("", true)
         ], true)
-      ], 46, _hoisted_1$Q);
+      ], 46, _hoisted_1$T);
     };
   }
 });
 
-const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-3354d162"]]);
+const KdsPopover = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-f41f0af7"]]);
 
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -2870,12 +2766,22 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     const menuContainerEl = useTemplateRef("menuContainer");
     const menuButtonEl = useTemplateRef("menuButton");
     const menuId = useId();
-    watch(isMenuOpen, async (menuOpen) => {
+    watch(isMenuOpen, (menuOpen, _oldVal, onCleanup) => {
       if (!menuOpen) {
         return;
       }
-      await nextTick();
-      menuContainerEl.value?.focus();
+      if (menuContainerEl.value) {
+        menuContainerEl.value.focus();
+        return;
+      }
+      const stop = watch(
+        menuContainerEl,
+        (el) => {
+          el?.focus();
+        },
+        { once: true }
+      );
+      onCleanup(stop);
     });
     const onItemClick = (itemId) => {
       isMenuOpen.value = false;
@@ -2884,12 +2790,12 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     __expose({ menuButtonEl });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$1p, mergeProps({ ref: "menuButton" }, toggleButtonProps.value, {
+        createVNode(_sfc_main$1s, mergeProps({ ref: "menuButton" }, toggleButtonProps.value, {
           modelValue: isMenuOpen.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
           "aria-haspopup": "menu",
           "aria-expanded": isMenuOpen.value,
-          "aria-controls": unref(menuId),
+          "aria-controls": isMenuOpen.value ? unref(menuId) : void 0,
           style: popoverEl.value?.anchorStyle
         }), null, 16, ["modelValue", "aria-expanded", "aria-controls", "style"]),
         createVNode(KdsPopover, {
@@ -2900,13 +2806,14 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
           "aria-label": "Menu"
         }, {
           default: withCtx(() => [
-            createVNode(KdsMenuContainer, {
+            isMenuOpen.value ? (openBlock(), createBlock(KdsMenuContainer, {
+              key: 0,
               id: unref(menuId),
               ref: "menuContainer",
               items: props.items,
               "menu-max-height": __props.menuMaxHeight,
               onItemClick
-            }, null, 8, ["id", "items", "menu-max-height"])
+            }, null, 8, ["id", "items", "menu-max-height"])) : createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["modelValue"])
@@ -2915,17 +2822,17 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$P = ["aria-disabled"];
-const _hoisted_2$v = { class: "kds-empty-state-headline" };
-const _hoisted_3$o = {
+const _hoisted_1$S = ["aria-disabled"];
+const _hoisted_2$x = { class: "kds-empty-state-headline" };
+const _hoisted_3$p = {
   key: 1,
   class: "kds-empty-state-description"
 };
-const _hoisted_4$l = {
+const _hoisted_4$m = {
   key: 2,
   class: "kds-empty-state-action"
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "KdsEmptyState",
   props: {
     headline: {},
@@ -2943,13 +2850,13 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
       () => props.button && "to" in props.button && props.button.to !== void 0
     );
     const buttonComponent = computed(
-      () => isLinkButton.value ? _sfc_main$1r : _sfc_main$1s
+      () => isLinkButton.value ? _sfc_main$1u : _sfc_main$1v
     );
     const isSecondaryLinkButton = computed(
       () => props.secondaryButton && "to" in props.secondaryButton && props.secondaryButton.to !== void 0
     );
     const secondaryButtonComponent = computed(
-      () => isSecondaryLinkButton.value ? _sfc_main$1r : _sfc_main$1s
+      () => isSecondaryLinkButton.value ? _sfc_main$1u : _sfc_main$1v
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -2963,9 +2870,9 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("p", _hoisted_2$v, toDisplayString(props.headline), 1),
-        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$o, toDisplayString(props.description), 1)) : createCommentVNode("", true),
-        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$l, [
+        createElementVNode("p", _hoisted_2$x, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$p, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        props.button ? (openBlock(), createElementBlock("div", _hoisted_4$m, [
           (openBlock(), createBlock(resolveDynamicComponent(buttonComponent.value), mergeProps(props.button, {
             disabled: props.button?.disabled || __props.disabled,
             onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("buttonClick", $event))
@@ -2975,16 +2882,16 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => !__props.disabled && emit("secondaryButtonClick", $event))
           }), null, 16, ["disabled"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$P);
+      ], 10, _hoisted_1$S);
     };
   }
 });
 
-const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__scopeId", "data-v-e913660a"]]);
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-e913660a"]]);
 
-const _hoisted_1$O = ["aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
+const _hoisted_1$R = ["aria-busy", "aria-label", "aria-activedescendant", "tabindex"];
 const loadingStateText = "Loading entries";
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "KdsListContainer",
   props: {
     possibleValues: {},
@@ -3107,12 +3014,12 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
             "loading-spinner": __props.loading
           }, null, 8, ["headline", "loading-spinner"])
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$O);
+      ], 16, _hoisted_1$R);
     };
   }
 });
 
-const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-118706ad"]]);
+const KdsListContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1h, [["__scopeId", "data-v-118706ad"]]);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -3125,11 +3032,10 @@ const createUnwrappedPromise = () => {
   });
   return { resolve, reject, promise };
 };
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 
-const _hoisted_1$N = { class: "kds-label-wrapper" };
-const _hoisted_2$u = ["id", "for", "title"];
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Q = { class: "kds-label-wrapper" };
+const _hoisted_2$w = ["id", "for", "title"];
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "KdsLabel",
   props: {
     label: {},
@@ -3146,7 +3052,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     const labelEl = useTemplateRef("labelEl");
     const { isTruncated } = useKdsIsTruncated(labelEl);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$N, [
+      return openBlock(), createElementBlock("div", _hoisted_1$Q, [
         createElementVNode("label", {
           id: props.id,
           ref_key: "labelEl",
@@ -3154,7 +3060,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
           for: props.for,
           class: "label",
           title: unref(isTruncated) ? props.label : void 0
-        }, toDisplayString(props.label), 9, _hoisted_2$u),
+        }, toDisplayString(props.label), 9, _hoisted_2$w),
         props.description ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
           key: 0,
           content: props.description,
@@ -3165,11 +3071,11 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-efe3313e"]]);
+const KdsLabel = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-efe3313e"]]);
 
-const _hoisted_1$M = ["id"];
-const _hoisted_2$t = { class: "subtext-text" };
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$P = ["id"];
+const _hoisted_2$v = { class: "subtext-text" };
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -3200,15 +3106,15 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
           variant: "onSurface",
           "aria-hidden": "true"
         })) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$t, toDisplayString(props.subText), 1)
-      ], 10, _hoisted_1$M)) : createCommentVNode("", true);
+        createElementVNode("span", _hoisted_2$v, toDisplayString(props.subText), 1)
+      ], 10, _hoisted_1$P)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-2e6ba10c"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$1d, [["__scopeId", "data-v-2e6ba10c"]]);
 
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "BaseFormFieldWrapper",
   props: {
     id: {},
@@ -3260,7 +3166,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$19, [["__scopeId", "data-v-5d99c134"]]);
+const BaseFormFieldWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["__scopeId", "data-v-5d99c134"]]);
 
 const MIN_SEGMENT_INDEX = 0;
 const LARGE_STEP = 10;
@@ -3937,17 +3843,17 @@ const useInputSegments = (modelValue, getInputElement, configRef) => {
   };
 };
 
-const _hoisted_1$L = {
+const _hoisted_1$O = {
   key: 0,
   class: "icon-wrapper leading"
 };
-const _hoisted_2$s = {
+const _hoisted_2$u = {
   key: 1,
   class: "leading-slot"
 };
-const _hoisted_3$n = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
-const _hoisted_4$k = ["aria-disabled"];
-const _hoisted_5$b = {
+const _hoisted_3$o = ["id", "value", "type", "inputmode", "placeholder", "disabled", "autocomplete", "min", "max", "step", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "role", "pattern", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-valuetext", "aria-activedescendant", "aria-haspopup", "aria-controls", "aria-expanded", "aria-autocomplete"];
+const _hoisted_4$l = ["aria-disabled"];
+const _hoisted_5$c = {
   key: 4,
   class: "trailing-slot"
 };
@@ -3955,7 +3861,7 @@ const _hoisted_6$9 = {
   key: 5,
   class: "icon-wrapper trailing"
 };
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -4106,13 +4012,13 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         }),
         onClick: handleContainerClick
       }, [
-        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$L, [
+        props.leadingIcon ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
           props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$s, [
+        _ctx.$slots.leading ? (openBlock(), createElementBlock("div", _hoisted_2$u, [
           renderSlot(_ctx.$slots, "leading", {}, void 0, true)
         ])) : createCommentVNode("", true),
         createElementVNode("input", {
@@ -4157,7 +4063,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           onCut: handleInputCut,
           onDrop: handleInputDrop,
           onDragend: handleInputDragEnd
-        }, null, 42, _hoisted_3$n),
+        }, null, 42, _hoisted_3$o),
         props.unit ? (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass({
@@ -4166,8 +4072,8 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled
           }),
           "aria-disabled": __props.disabled || void 0
-        }, toDisplayString(props.unit), 11, _hoisted_4$k)) : createCommentVNode("", true),
-        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1s, {
+        }, toDisplayString(props.unit), 11, _hoisted_4$l)) : createCommentVNode("", true),
+        __props.clearable && hasValue.value && !__props.disabled ? (openBlock(), createBlock(_sfc_main$1v, {
           key: 3,
           class: "clear-button",
           size: "xsmall",
@@ -4177,7 +4083,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           title: "Clear",
           onClick: withModifiers(clearAndFocusInput, ["stop"])
         })) : createCommentVNode("", true),
-        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$b, [
+        _ctx.$slots.trailing ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
           renderSlot(_ctx.$slots, "trailing", {}, void 0, true)
         ])) : createCommentVNode("", true),
         props.trailingIcon ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
@@ -4190,9 +4096,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$18, [["__scopeId", "data-v-93daa14e"]]);
+const BaseInput = /* @__PURE__ */ _export_sfc(_sfc_main$1b, [["__scopeId", "data-v-93daa14e"]]);
 
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "KdsTextInput",
   props: /* @__PURE__ */ mergeModels({
     description: {},
@@ -4251,7 +4157,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       isFocused.value = true;
       if (hasFilteredSuggestions.value) {
         popoverOpen.value = true;
-        listContainerRef.value?.handleFocus();
       }
     };
     const onBlur = () => {
@@ -4264,7 +4169,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       }
       if (has) {
         popoverOpen.value = true;
-        listContainerRef.value?.handleFocus();
       } else {
         closePopover();
       }
@@ -4276,7 +4180,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       if (!popoverOpen.value) {
         if (event.key !== "Enter" && event.key !== "Escape") {
           popoverOpen.value = true;
-          listContainerRef.value?.handleFocus();
         }
         return;
       } else if (event.key === "Escape") {
@@ -4324,7 +4227,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             "aria-haspopup": hasSuggestions.value ? "listbox" : void 0,
             "aria-expanded": hasSuggestions.value ? popoverOpen.value : void 0,
             "aria-autocomplete": hasSuggestions.value ? "list" : void 0,
-            "aria-controls": hasSuggestions.value ? unref(suggestionId) : void 0,
+            "aria-controls": hasSuggestions.value && popoverOpen.value ? unref(suggestionId) : void 0,
             "aria-activedescendant": listContainerRef.value?.activeDescendant,
             style: hasSuggestions.value ? popoverRef.value?.anchorStyle : void 0,
             onFocus,
@@ -4342,7 +4245,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             "popover-type": "manual"
           }, {
             default: withCtx(() => [
-              createVNode(unref(KdsListContainer), {
+              popoverOpen.value ? (openBlock(), createBlock(unref(KdsListContainer), {
+                key: 0,
                 id: unref(suggestionId),
                 ref_key: "listContainerRef",
                 ref: listContainerRef,
@@ -4351,7 +4255,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
                 "controlled-externally": "",
                 "aria-label": "Suggestions",
                 onItemClick
-              }, null, 8, ["id", "possible-values"])
+              }, null, 8, ["id", "possible-values"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["modelValue"])) : createCommentVNode("", true)
@@ -4362,7 +4266,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$17, [["__scopeId", "data-v-83f45d15"]]);
+const KdsTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$1a, [["__scopeId", "data-v-dd35e2a4"]]);
 
 defineComponent({
   name: "FileExplorerItemBase",
@@ -8241,7 +8145,7 @@ function applyDefaultFilter(v) {
     return name + "(" + defaultValue + unit + ")";
 }
 const functionRegex = /\b([a-z-]*)\(.*?\)/gu;
-const filter$1 = {
+const filter = {
     ...complex,
     getAnimatableNone: (v) => {
         const functions = v.match(functionRegex);
@@ -8371,8 +8275,8 @@ const defaultValueTypes = {
     borderRightColor: color,
     borderBottomColor: color,
     borderLeftColor: color,
-    filter: filter$1,
-    WebkitFilter: filter$1,
+    filter,
+    WebkitFilter: filter,
     mask,
     WebkitMask: mask,
 };
@@ -8381,7 +8285,7 @@ const defaultValueTypes = {
  */
 const getDefaultValueType = (key) => defaultValueTypes[key];
 
-const customTypes = /*@__PURE__*/ new Set([filter$1, mask]);
+const customTypes = /*@__PURE__*/ new Set([filter, mask]);
 function getAnimatableNone(key, value) {
     let defaultValueType = getDefaultValueType(key);
     if (!customTypes.has(defaultValueType))
@@ -10384,19 +10288,19 @@ createScopedAnimate();
   return null;
 })();
 
-const _hoisted_1$G = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
-const _hoisted_2$o = { class: "control" };
-const _hoisted_3$k = {
+const _hoisted_1$J = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
+const _hoisted_2$q = { class: "control" };
+const _hoisted_3$l = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$h = { class: "label" };
-const _hoisted_5$8 = ["id"];
+const _hoisted_4$i = { class: "label" };
+const _hoisted_5$9 = ["id"];
 const _hoisted_6$6 = {
   key: 0,
   class: "subtext-wrapper"
 };
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -10469,7 +10373,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
           role: "checkbox",
           onClick: handleClick
         }, [
-          createElementVNode("div", _hoisted_2$o, [
+          createElementVNode("div", _hoisted_2$q, [
             icon.value ? (openBlock(), createBlock(KdsIcon, {
               key: 0,
               name: icon.value,
@@ -10477,15 +10381,15 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
               size: "xsmall"
             }, null, 8, ["name"])) : createCommentVNode("", true)
           ]),
-          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$k, [
-            createElementVNode("div", _hoisted_4$h, toDisplayString(props.label), 1),
+          props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$l, [
+            createElementVNode("div", _hoisted_4$i, toDisplayString(props.label), 1),
             props.helperText ? (openBlock(), createElementBlock("div", {
               key: 0,
               id: unref(helperId),
               class: "helper-text"
-            }, toDisplayString(props.helperText), 9, _hoisted_5$8)) : createCommentVNode("", true)
+            }, toDisplayString(props.helperText), 9, _hoisted_5$9)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$G),
+        ], 10, _hoisted_1$J),
         props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
@@ -10499,9 +10403,9 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["__scopeId", "data-v-0bec87ad"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-0bec87ad"]]);
 
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -14508,8 +14412,8 @@ new RegExp(
   "i"
 );
 
-const _hoisted_1$s = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
-const _hoisted_2$g = {
+const _hoisted_1$t = ["id", "aria-expanded", "aria-labelledby", "aria-describedby", "aria-label", "aria-invalid", "aria-controls", "disabled"];
+const _hoisted_2$h = {
   key: 0,
   class: "leading",
   "aria-hidden": "true"
@@ -14520,7 +14424,7 @@ const _hoisted_4$a = {
   "aria-hidden": "true"
 };
 const TRIGGER_REF = "triggerEl";
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "BaseDropdown",
   props: /* @__PURE__ */ mergeModels({
     text: {},
@@ -14600,8 +14504,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => !__props.disabled && emit("click")),
         onKeydown
       }, [
-        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$g, [
-          createVNode(_sfc_main$1n, {
+        props.accessory ? (openBlock(), createElementBlock("span", _hoisted_2$h, [
+          createVNode(_sfc_main$1q, {
             accessory: props.accessory,
             size: "medium"
           }, null, 8, ["accessory"])
@@ -14619,21 +14523,21 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             size: "small"
           }, null, 8, ["name"])
         ])
-      ], 42, _hoisted_1$s);
+      ], 42, _hoisted_1$t);
     };
   }
 });
 
-const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-1bb2d375"]]);
+const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-1bb2d375"]]);
 
 const DROPDOWN_SEARCH_THRESHOLD = 12;
 
-const _hoisted_1$r = { class: "kds-dropdown-container" };
-const _hoisted_2$f = {
+const _hoisted_1$s = { class: "kds-dropdown-container" };
+const _hoisted_2$g = {
   key: 0,
   class: "kds-dropdown-container-sticky-top"
 };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "DropdownContainer",
   props: /* @__PURE__ */ mergeModels({
     emptyText: {},
@@ -14717,8 +14621,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
-        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+        searchable.value ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
           createVNode(BaseInput, {
             ref_key: "searchEl",
             ref: searchEl,
@@ -14750,9 +14654,9 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-0a6ce241"]]);
+const DropdownContainer = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-0a6ce241"]]);
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "KdsDropdown",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select" },
@@ -14782,9 +14686,20 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     const selectedOption = computed(
       () => props.possibleValues.find((o) => o.id === modelValue.value)
     );
-    watchEffect(() => {
+    watchEffect((onCleanup) => {
       if (open.value) {
-        nextTick(() => dropdownContainerEl.value?.focus());
+        if (dropdownContainerEl.value) {
+          dropdownContainerEl.value.focus();
+          return;
+        }
+        const stop = watch(
+          dropdownContainerEl,
+          (el) => {
+            el?.focus();
+          },
+          { once: true }
+        );
+        onCleanup(stop);
       }
     });
     const closeDropdown = () => {
@@ -14835,7 +14750,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             "aria-label": "Dropdown menu"
           }, {
             default: withCtx(() => [
-              createVNode(DropdownContainer, {
+              open.value ? (openBlock(), createBlock(DropdownContainer, {
+                key: 0,
                 ref_key: "dropdownContainerEl",
                 ref: dropdownContainerEl,
                 modelValue: modelValue.value,
@@ -14844,7 +14760,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 loading: __props.loading,
                 "empty-text": "No entries found",
                 onSelect: closeDropdown
-              }, null, 8, ["modelValue", "possible-values", "loading"])
+              }, null, 8, ["modelValue", "possible-values", "loading"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["modelValue"])
@@ -15100,9 +15016,20 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
     const popoverEl = useTemplateRef("popoverEl");
     const baseDropdownEl = useTemplateRef("baseDropdownEl");
-    watchEffect(() => {
+    watchEffect((onCleanup) => {
       if (open.value) {
-        nextTick(() => dropdownContainerEl.value?.focus());
+        if (dropdownContainerEl.value) {
+          dropdownContainerEl.value.focus();
+          return;
+        }
+        const stop = watch(
+          dropdownContainerEl,
+          (el) => {
+            el?.focus();
+          },
+          { once: true }
+        );
+        onCleanup(stop);
       }
     });
     const addedOptions = ref([]);
@@ -15182,7 +15109,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             "aria-label": "Multi select dropdown options"
           }, {
             default: withCtx(() => [
-              createVNode(MultiSelectDropdownContainer, {
+              open.value ? (openBlock(), createBlock(MultiSelectDropdownContainer, {
+                key: 0,
                 ref_key: "dropdownContainerEl",
                 ref: dropdownContainerEl,
                 modelValue: modelValue.value,
@@ -15192,7 +15120,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 "allow-new-values": __props.allowNewValues,
                 "empty-text": "No entries found",
                 onAddValue
-              }, null, 8, ["modelValue", "possible-values", "loading", "allow-new-values"])
+              }, null, 8, ["modelValue", "possible-values", "loading", "allow-new-values"])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["modelValue"])
@@ -15278,14 +15206,15 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           "aria-label": "Description"
         }, {
           default: withCtx(() => [
-            createVNode(InfoPopover, {
+            modelValue.value ? (openBlock(), createBlock(InfoPopover, {
+              key: 0,
               content: props.content
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ]),
               _: 3
-            }, 8, ["content"])
+            }, 8, ["content"])) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["modelValue"])
@@ -15294,7 +15223,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-2e9ef96a"]]);
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-67a8974e"]]);
 
 const KdsInfoToggleButton$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,
@@ -15428,24 +15357,24 @@ const useIndicesAndStylesFor = (data) => {
   };
 };
 
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   key: 0,
   class: "deletion-cell-spacer"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "EmptyRow",
   props: {
     width: {},
     height: {},
     compact: { type: Boolean },
-    columnSizes: {},
+    colSizes: {},
     specialColumnSizes: {},
     tableConfig: {}
   },
   setup(__props) {
     const props = __props;
     const { indexedData: indexedRow, style: rowStyles } = useIndicesAndStylesFor(
-      toRef(props, "columnSizes")
+      toRef(props, "colSizes")
     );
     const paddingTopBottom = computed(
       () => props.compact ? COMPACT_ROW_PADDING_TOP_BOTTOM : DEFAULT_ROW_PADDING_TOP_BOTTOM
@@ -15458,7 +15387,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           height: `${__props.height}px`
         })
       }, [
-        __props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$c)) : createCommentVNode("", true),
+        __props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$d)) : createCommentVNode("", true),
         __props.tableConfig.showSelection ? (openBlock(), createElementBlock("td", {
           key: 1,
           class: "select-cell",
@@ -15467,7 +15396,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             paddingBottom: `${paddingTopBottom.value}px`
           })
         }, [
-          createVNode(unref(_sfc_main$10), {
+          createVNode(unref(_sfc_main$13), {
             title: "Selection",
             disabled: "",
             class: "select-checkbox"
@@ -15492,9 +15421,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const EmptyRow = /* @__PURE__ */ _export_sfc$1(_sfc_main$l, [["__scopeId", "data-v-b1ac99a6"]]);
+const EmptyRow = /* @__PURE__ */ _export_sfc$1(_sfc_main$m, [["__scopeId", "data-v-640baae1"]]);
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PlaceholderRow",
   props: {
     height: {}
@@ -15511,16 +15440,16 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PlaceholderRow = /* @__PURE__ */ _export_sfc$1(_sfc_main$k, [["__scopeId", "data-v-df158652"]]);
+const PlaceholderRow = /* @__PURE__ */ _export_sfc$1(_sfc_main$l, [["__scopeId", "data-v-df158652"]]);
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VirtualRow",
   props: {
     dataItem: {},
     rowHeight: {},
     compact: { type: Boolean },
     bodyWidth: {},
-    columnSizes: {},
+    colSizes: {},
     specialColumnSizes: {},
     tableConfig: {}
   },
@@ -15539,10 +15468,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         height: __props.rowHeight,
         compact: __props.compact,
         width: __props.bodyWidth,
-        "column-sizes": __props.columnSizes,
+        "col-sizes": __props.colSizes,
         "special-column-sizes": __props.specialColumnSizes,
         "table-config": __props.tableConfig
-      }, null, 8, ["height", "compact", "width", "column-sizes", "special-column-sizes", "table-config"]));
+      }, null, 8, ["height", "compact", "width", "col-sizes", "special-column-sizes", "table-config"]));
     };
   }
 });
@@ -15668,12 +15597,12 @@ const useResizeScrollSpacer = ({
   };
 };
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "TableCoreVirtual",
   props: {
     scrollData: {},
     scrollConfig: {},
-    columnSizes: {},
+    colSizes: {},
     specialColumnSizes: {},
     currentBodyWidth: {},
     tableConfig: {},
@@ -15697,7 +15626,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       sizeManager
     );
     const columnSizeManager = withLeftSideSize(
-      withRightSideSize(new Z$1(toRef(props, "columnSizes")))
+      withRightSideSize(new Z$1(toRef(props, "colSizes")))
     );
     const numRows = computed(
       () => props.scrollData.length + props.scrollConfig.numRowsAbove + props.scrollConfig.numRowsBelow
@@ -15810,13 +15739,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               style: normalizeStyle(__props.tableConfig.forceRenderAll ? {} : unref(verticalStyles))
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(renderedRowIndices.value, (rowInd) => {
-                return openBlock(), createBlock(_sfc_main$j, {
+                return openBlock(), createBlock(_sfc_main$k, {
                   key: rowInd,
                   "row-height": __props.scrollConfig.itemSize,
                   compact: __props.scrollConfig.compact,
                   "body-width": __props.currentBodyWidth,
                   "data-item": __props.scrollData[rowInd - __props.scrollConfig.numRowsAbove],
-                  "column-sizes": __props.columnSizes,
+                  "col-sizes": __props.colSizes,
                   "special-column-sizes": __props.specialColumnSizes,
                   "table-config": __props.tableConfig
                 }, {
@@ -15827,7 +15756,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                     }, void 0, true)
                   ]),
                   _: 2
-                }, 1032, ["row-height", "compact", "body-width", "data-item", "column-sizes", "special-column-sizes", "table-config"]);
+                }, 1032, ["row-height", "compact", "body-width", "data-item", "col-sizes", "special-column-sizes", "table-config"]);
               }), 128))
             ], 4)
           ]),
@@ -15854,7 +15783,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TableCoreVirtual = /* @__PURE__ */ _export_sfc$1(_sfc_main$i, [["__scopeId", "data-v-fb9f9377"]]);
+const TableCoreVirtual = /* @__PURE__ */ _export_sfc$1(_sfc_main$j, [["__scopeId", "data-v-a66c9aef"]]);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -16010,14 +15939,15 @@ const useAvailableWidth = ({
   return { innerWidthToBodyWidth, fitsInsideTotalWidth };
 };
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "TableCore",
   props: {
     scrollData: {},
     scrollConfig: {},
     tableConfig: {},
+    subMenuConfig: {},
     totalWidth: {},
-    columnSizes: {},
+    colSizes: {},
     currentRowHeight: {},
     columnResize: {},
     newColumnButtonWidth: {}
@@ -16042,7 +15972,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       () => props.tableConfig.enableRowDeletion ? SPECIAL_COLUMNS_SIZE : 0
     );
     const rightSideSize = computed(() => {
-      const rowSubMenuSpace = (props.tableConfig.subMenuItems ?? []).length > 0 || props.tableConfig.reserveSpaceForSubMenu === "always" ? SPECIAL_COLUMNS_SIZE : 0;
+      const rowSubMenuSpace = (props.subMenuConfig.subMenuItems ?? []).length > 0 || props.subMenuConfig.reserveSpaceForSubMenu === "always" ? SPECIAL_COLUMNS_SIZE : 0;
       return rowSubMenuSpace + props.newColumnButtonWidth;
     });
     const scrolledElement = ref(null);
@@ -16055,7 +15985,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       totalWidth: toRef(props, "totalWidth")
     });
     const currentBodyWidth = computed(() => {
-      const widthContentColumns = props.columnSizes.reduce(
+      const widthContentColumns = props.colSizes.reduce(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (prev, curr) => prev + curr,
         0
@@ -16074,7 +16004,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         ref_key: "tableCoreVirtual",
         ref: tableCoreVirtual,
         "scroll-data": __props.scrollData[0],
-        "column-sizes": __props.columnSizes,
+        "col-sizes": __props.colSizes,
         "scroll-config": __props.scrollConfig,
         "special-column-sizes": {
           selectionSize: selectionSize.value,
@@ -16110,7 +16040,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "belowBody")
         ]),
         _: 3
-      }, 8, ["scroll-data", "column-sizes", "scroll-config", "special-column-sizes", "current-body-width", "table-config", "column-resize-active"]);
+      }, 8, ["scroll-data", "col-sizes", "scroll-config", "special-column-sizes", "current-body-width", "table-config", "column-resize-active"]);
     };
   }
 });
@@ -16365,126 +16295,14 @@ const createEditingCellKeydownHandler = ({
   };
 };
 
-const defaultValueFor = (is) => {
-  if (is === "ControlMultiselect") {
-    return [];
-  }
-  return "";
-};
-const missingValueFor = (is) => {
-  if (is === "ControlMultiselect") {
-    return [null];
-  }
-  return null;
-};
-const isMissingMode = (config) => {
-  if (config.is === "ControlMultiselect") {
-    return Array.isArray(config.modelValue) && config.modelValue.length === 1 && config.modelValue[0] === null;
-  }
-  return config.modelValue === null;
-};
-const isActive = (config) => {
-  if (!config) {
-    return false;
-  }
-  if (isMissingMode(config)) {
-    return true;
-  }
-  if (config.is === "ControlMultiselect") {
-    return Array.isArray(config.modelValue) && config.modelValue.length > 0;
-  }
-  return config.modelValue !== void 0 && config.modelValue !== "";
-};
-
-const useHeaderMenuItems = ({
-  enableSorting,
-  enableFiltering,
-  filterConfig,
-  sortDirection,
-  headerSubMenuItems,
-  sortTexts,
-  onColumnSort,
-  openFilterControl,
-  clearFilter
-}) => {
-  const staticItems = [];
-  const hasDynamicItems = Boolean(headerSubMenuItems?.length);
-  const showFilterItem = enableFiltering && filterConfig !== void 0;
-  const filterIsActive = showFilterItem && isActive(filterConfig);
-  if (enableSorting) {
-    staticItems.push({
-      id: "table-header-sort",
-      text: "Sort this column",
-      separator: !showFilterItem && hasDynamicItems,
-      sectionHeadline: true,
-      sectionHeadlineIcon: "sort-ascending"
-    });
-    staticItems.push({
-      id: "sort-asc",
-      text: sortTexts.ascending,
-      handler: (_item, _event) => {
-        onColumnSort(1);
-      },
-      trailingIcon: sortDirection === 1 ? "checkmark" : void 0
-    });
-    staticItems.push({
-      id: "sort-desc",
-      text: sortTexts.descending,
-      handler: (_item, _event) => {
-        onColumnSort(-1);
-      },
-      trailingIcon: sortDirection === -1 ? "checkmark" : void 0
-    });
-    staticItems.push({
-      id: "sort-none",
-      text: "No sorting",
-      handler: (_item, _event) => {
-        onColumnSort(0);
-      },
-      trailingIcon: sortDirection === 0 ? "checkmark" : void 0
-    });
-  }
-  if (showFilterItem) {
-    if (filterIsActive) {
-      staticItems.push({
-        id: "table-header-clear-filter",
-        text: "Clear filter",
-        separator: hasDynamicItems,
-        accessory: {
-          type: "icon",
-          name: "filter"
-        },
-        handler: (_item, _event) => {
-          clearFilter();
-        }
-      });
-    } else {
-      staticItems.push({
-        id: "table-header-filter",
-        text: "Filter by this column",
-        separator: hasDynamicItems,
-        accessory: {
-          type: "icon",
-          name: "filter"
-        },
-        handler: (_item, _event) => {
-          openFilterControl();
-        }
-      });
-    }
-  }
-  const menuItems = [...staticItems, ...headerSubMenuItems ?? []];
-  return menuItems.length ? menuItems : void 0;
-};
-
-const _hoisted_1$b = {
+const _hoisted_1$c = {
   key: 0,
   class: "page-navigation"
 };
 const _hoisted_2$8 = { class: "navigation-buttons" };
 const _hoisted_3$5 = { class: "page-count" };
 const _hoisted_4$3 = { class: "navigation-buttons" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PageNavigation",
   props: {
     currentItems: { default: 0 },
@@ -16507,9 +16325,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       emit("pageChange", newPageNumber);
     };
     return (_ctx, _cache) => {
-      return hasNextPage.value || hasPreviousPage.value ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return hasNextPage.value || hasPreviousPage.value ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", _hoisted_2$8, [
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-left-double",
@@ -16517,7 +16335,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             disabled: !hasPreviousPage.value,
             onClick: _cache[0] || (_cache[0] = ($event) => onPageChange(1))
           }, null, 8, ["disabled"]),
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-left",
@@ -16528,7 +16346,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         ]),
         createElementVNode("span", _hoisted_3$5, toDisplayString(__props.currentPage) + " of " + toDisplayString(totalPages.value), 1),
         createElementVNode("div", _hoisted_4$3, [
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-right",
@@ -16536,7 +16354,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             disabled: !hasNextPage.value,
             onClick: _cache[2] || (_cache[2] = ($event) => onPageChange(__props.currentPage + 1))
           }, null, 8, ["disabled"]),
-          createVNode(unref(_sfc_main$1s), {
+          createVNode(unref(_sfc_main$1v), {
             variant: "transparent",
             size: "small",
             "leading-icon": "chevron-right-double",
@@ -16550,9 +16368,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PageNavigation = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-f8714af0"]]);
+const PageNavigation = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-f8714af0"]]);
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   key: 0,
   class: "subtle"
 };
@@ -16566,7 +16384,7 @@ const _hoisted_4$2 = {
   class: "muted"
 };
 const _hoisted_5$1 = { class: "subtle" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PageRowRange",
   props: {
     currentItems: { default: 0 },
@@ -16588,7 +16406,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       () => hasMultiplePages.value && __props.currentItems ? `of ${__props.currentItems}` : __props.currentItems
     );
     return (_ctx, _cache) => {
-      return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$a, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
+      return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$b, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
         createElementVNode("span", _hoisted_3$4, 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)
@@ -16597,25 +16415,34 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const PageRowRange = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-6cdf0c06"]]);
+const PageRowRange = /* @__PURE__ */ _export_sfc$1(_sfc_main$g, [["__scopeId", "data-v-6cdf0c06"]]);
 
-const _sfc_main$e = {
+const _sfc_main$f = {
   components: {
     PageNavigation,
     PageRowRange,
-    KdsMenuButton: _sfc_main$1h
+    KdsMenuButton: _sfc_main$1k
   },
   props: {
+    tableConfig: {
+      type: Object,
+      required: true
+    },
     pageConfig: {
       type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["pageSizeUpdate", "pageChange"],
-  computed: {
-    showPageNavigationControls() {
-      return this.pageConfig.showPageControls ?? true;
+      required: true
     },
+    tableState: {
+      type: Object,
+      required: true
+    },
+    pageState: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["pageSizeUpdate", "pageChange"],
+  computed: {
     pageSizeItems() {
       return (this.pageConfig.possiblePageSizes ?? []).map((pageSize) => ({
         id: pageSize.toString(),
@@ -16634,28 +16461,27 @@ const _sfc_main$e = {
   }
 };
 
-const _hoisted_1$9 = { class: "page-controls" };
+const _hoisted_1$a = { class: "page-controls" };
 const _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");
   const _component_KdsMenuButton = resolveComponent("KdsMenuButton");
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     createVNode(_component_PageRowRange, {
       class: "page-row-range",
-      "current-items": $props.pageConfig.currentSize,
+      "current-items": $props.tableState.currentSize,
       "page-size": $props.pageConfig.pageSize,
-      "current-page": $props.pageConfig.currentPage,
-      "show-table-size": $props.pageConfig.showTableSize,
-      "row-label": $props.pageConfig.rowLabel
+      "current-page": $props.pageState.currentPage,
+      "show-table-size": $props.tableConfig.showTableSize,
+      "row-label": $props.tableConfig.rowLabel
     }, null, 8, ["current-items", "page-size", "current-page", "show-table-size", "row-label"]),
-    $options.showPageNavigationControls ? (openBlock(), createBlock(_component_PageNavigation, {
-      key: 0,
-      "current-items": $props.pageConfig.currentSize,
+    createVNode(_component_PageNavigation, {
+      "current-items": $props.tableState.currentSize,
       "page-size": $props.pageConfig.pageSize,
-      "current-page": $props.pageConfig.currentPage,
+      "current-page": $props.pageState.currentPage,
       onPageChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("pageChange", $event))
-    }, null, 8, ["current-items", "page-size", "current-page"])) : createCommentVNode("", true),
+    }, null, 8, ["current-items", "page-size", "current-page"]),
     createElementVNode("div", _hoisted_2$6, [
       createVNode(_component_KdsMenuButton, {
         items: $options.pageSizeItems,
@@ -16668,9 +16494,40 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const PageControls = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["render", _sfc_render$4], ["__scopeId", "data-v-df9e464a"]]);
+const PageControls = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["render", _sfc_render$4], ["__scopeId", "data-v-10c111ef"]]);
+
+const defaultValueFor = (is) => {
+  if (is === "ControlMultiselect") {
+    return [];
+  }
+  return "";
+};
+const missingValueFor = (is) => {
+  if (is === "ControlMultiselect") {
+    return [null];
+  }
+  return null;
+};
+const isMissingMode = (config, value) => {
+  if (config.is === "ControlMultiselect") {
+    return Array.isArray(value) && value.length === 1 && value[0] === null;
+  }
+  return value === null;
+};
+const isActive = (config, value) => {
+  if (!config) {
+    return false;
+  }
+  if (isMissingMode(config, value)) {
+    return true;
+  }
+  if (config.is === "ControlMultiselect") {
+    return Array.isArray(value) && value.length > 0;
+  }
+  return value !== void 0 && value !== "";
+};
 
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "rows"
 };
@@ -16678,11 +16535,11 @@ const _hoisted_2$5 = {
   key: 1,
   class: "value"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "FilterControlBody",
   props: {
-    filterConfigs: {},
-    columnHeaders: {}
+    columns: {},
+    colFilterValues: {}
   },
   emits: ["columnFilter"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -16704,22 +16561,29 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return config;
     };
     const filterableColumnIndices = computed(
-      () => (props.filterConfigs ?? []).map((config, index) => ({ config, index })).filter(({ config }) => config !== void 0).map(({ index }) => index)
+      () => (props.columns ?? []).map((column, index) => ({ config: column.filterConfig, index })).filter(({ config }) => config !== void 0).map(({ index }) => index)
     );
     const trackedIndices = ref([]);
     onMounted(() => {
-      trackedIndices.value = (props.filterConfigs ?? []).map((config, index) => ({ index, config })).filter(({ config }) => isActive(config)).map(({ index }) => index);
+      trackedIndices.value = (props.columns ?? []).map((column, index) => ({
+        index,
+        config: column.filterConfig,
+        value: props.colFilterValues[column.id]
+      })).filter(({ config, value }) => isActive(config, value)).map(({ index }) => index);
     });
     const visibleFilters = computed(
       () => trackedIndices.value.map((index, rowPosition) => {
-        const config = props.filterConfigs?.[index];
+        const column = props.columns?.[index];
+        const config = column?.filterConfig;
+        const value = props.colFilterValues[column.id];
         if (!config) {
           return null;
         }
         return {
           rowPosition,
           index,
-          config: withFilteredPossibleValues(config)
+          config: withFilteredPossibleValues(config),
+          value
         };
       }).filter(
         (entry) => entry !== null
@@ -16732,7 +16596,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       (idx) => idx === currentIndex || !trackedIndices.value.includes(idx)
     ).map((idx) => ({
       id: String(idx),
-      text: props.columnHeaders[idx]
+      text: props.columns?.[idx]?.header ?? ""
     }));
     const onColumnChange = (rowPosition, newIdAsString) => {
       const newIndex = Number(newIdAsString);
@@ -16740,8 +16604,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       if (oldIndex === newIndex) {
         return;
       }
-      const oldConfig = props.filterConfigs?.[oldIndex];
-      if (oldConfig && isActive(oldConfig)) {
+      const oldColumn = props.columns?.[oldIndex];
+      const oldConfig = oldColumn?.filterConfig;
+      const oldValue = props.colFilterValues[oldColumn?.id];
+      if (oldConfig && isActive(oldConfig, oldValue)) {
         emit("columnFilter", oldIndex, defaultValueFor(oldConfig.is));
       }
       trackedIndices.value = trackedIndices.value.map(
@@ -16766,8 +16632,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     const onDeleteRow = (rowPosition) => {
       const index = trackedIndices.value[rowPosition];
-      const config = props.filterConfigs?.[index];
-      if (config && isActive(config)) {
+      const column = props.columns?.[index];
+      const config = column?.filterConfig;
+      const value = props.colFilterValues[column?.id];
+      if (isActive(config, value)) {
         emit("columnFilter", index, defaultValueFor(config.is));
       }
       trackedIndices.value = trackedIndices.value.filter(
@@ -16798,13 +16666,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     __expose({ addAndFocusColumn });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        visibleFilters.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleFilters.value, ({ rowPosition, index, config }) => {
+        visibleFilters.value.length ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleFilters.value, ({ rowPosition, index, config, value }) => {
             return openBlock(), createElementBlock("div", {
               key: index,
               class: "row"
             }, [
-              createVNode(unref(_sfc_main$z), {
+              createVNode(unref(_sfc_main$A), {
                 class: "column",
                 "model-value": String(index),
                 placeholder: "Select",
@@ -16812,30 +16680,30 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 ariaLabel: "Select column to filter",
                 "onUpdate:modelValue": ($event) => onColumnChange(rowPosition, $event)
               }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"]),
-              createVNode(unref(_sfc_main$z), {
+              createVNode(unref(_sfc_main$A), {
                 class: "mode",
-                "model-value": unref(isMissingMode)(config) ? "missing" : "contains",
+                "model-value": unref(isMissingMode)(config, value) ? "missing" : "contains",
                 placeholder: "Mode",
                 "possible-values": MODE_OPTIONS,
                 ariaLabel: "Select filter mode",
                 "onUpdate:modelValue": ($event) => onModeChange(index, config, $event)
               }, null, 8, ["model-value", "onUpdate:modelValue"]),
-              !unref(isMissingMode)(config) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              !unref(isMissingMode)(config, value) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                 config.is === "FilterInputField" ? (openBlock(), createBlock(unref(KdsTextInput), {
                   key: 0,
                   ref_for: true,
                   ref: (el) => setValueRef(index, el),
                   class: "value",
-                  "model-value": String(config.modelValue ?? ""),
+                  "model-value": value ?? "",
                   placeholder: "value",
                   ariaLabel: "Enter filter value",
                   "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
-                }, null, 8, ["model-value", "onUpdate:modelValue"])) : config.is === "ControlDropdown" ? (openBlock(), createBlock(unref(_sfc_main$z), {
+                }, null, 8, ["model-value", "onUpdate:modelValue"])) : config.is === "ControlDropdown" ? (openBlock(), createBlock(unref(_sfc_main$A), {
                   key: 1,
                   ref_for: true,
                   ref: (el) => setValueRef(index, el),
                   class: "value",
-                  "model-value": config.modelValue ?? "",
+                  "model-value": value ?? "",
                   placeholder: "value",
                   "possible-values": config.possibleValues,
                   ariaLabel: "Select filter value",
@@ -16845,14 +16713,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   ref_for: true,
                   ref: (el) => setValueRef(index, el),
                   class: "value",
-                  "model-value": config.modelValue ?? [],
+                  "model-value": value ?? [],
                   placeholder: "value",
                   "possible-values": config.possibleValues,
                   ariaLabel: "Select filter values",
                   "onUpdate:modelValue": ($event) => emit("columnFilter", index, $event)
                 }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"])) : createCommentVNode("", true)
               ], 64)) : (openBlock(), createElementBlock("span", _hoisted_2$5)),
-              createVNode(unref(_sfc_main$1s), {
+              createVNode(unref(_sfc_main$1v), {
                 class: "trash",
                 "aria-label": "Remove filter",
                 "leading-icon": "trash",
@@ -16864,7 +16732,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             ]);
           }), 128))
         ])) : createCommentVNode("", true),
-        canAddMore.value ? (openBlock(), createBlock(unref(_sfc_main$1s), {
+        canAddMore.value ? (openBlock(), createBlock(unref(_sfc_main$1v), {
           key: 1,
           class: "add",
           label: "Add criterion",
@@ -16878,16 +16746,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const FilterControlBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$d, [["__scopeId", "data-v-9653892f"]]);
+const FilterControlBody = /* @__PURE__ */ _export_sfc$1(_sfc_main$e, [["__scopeId", "data-v-bd4cc5ec"]]);
 
-const _sfc_main$c = {  };
+const _sfc_main$d = {  };
 
-const _hoisted_1$7 = { class: "popover" };
+const _hoisted_1$8 = { class: "popover" };
 const _hoisted_2$4 = { class: "header" };
 const _hoisted_3$3 = { class: "body" };
 
 function _sfc_render$3(_ctx, _cache) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
     createElementVNode("span", _hoisted_2$4, [
       renderSlot(_ctx.$slots, "header", {}, undefined, true)
     ]),
@@ -16896,7 +16764,7 @@ function _sfc_render$3(_ctx, _cache) {
     ])
   ]))
 }
-const PopoverContainer = /*#__PURE__*/_export_sfc$1(_sfc_main$c, [['render',_sfc_render$3],['__scopeId',"data-v-349cd3ba"]]);
+const PopoverContainer = /*#__PURE__*/_export_sfc$1(_sfc_main$d, [['render',_sfc_render$3],['__scopeId',"data-v-349cd3ba"]]);
 
 const useButtonPopoverInteraction = ({
   keepButtonActive
@@ -16927,11 +16795,11 @@ const useButtonPopoverInteraction = ({
   };
 };
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "FilterControl",
   props: {
-    filterConfigs: {},
-    columnHeaders: {}
+    columns: {},
+    colFilterValues: {}
   },
   emits: ["columnFilter"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -16940,7 +16808,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const filterPopoverRef = useTemplateRef("filterPopoverRef");
     const filterBodyRef = useTemplateRef("filterBodyRef");
     const hasActiveFilter = computed(
-      () => props.filterConfigs?.some(isActive) ?? false
+      () => props.columns?.some(
+        (column) => isActive(column.filterConfig, props.colFilterValues[column.id])
+      ) ?? false
     );
     const {
       buttonIsActive,
@@ -16960,7 +16830,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     __expose({ openPopover });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(_sfc_main$1p), {
+        createVNode(unref(_sfc_main$1s), {
           modelValue: unref(buttonIsActive),
           "onUpdate:modelValue": [
             _cache[0] || (_cache[0] = ($event) => isRef(buttonIsActive) ? buttonIsActive.value = $event : null),
@@ -17001,10 +16871,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 createVNode(FilterControlBody, {
                   ref_key: "filterBodyRef",
                   ref: filterBodyRef,
-                  "filter-configs": __props.filterConfigs,
-                  "column-headers": __props.columnHeaders,
+                  columns: __props.columns,
+                  "col-filter-values": __props.colFilterValues,
                   onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => emit("columnFilter", colInd, value))
-                }, null, 8, ["filter-configs", "column-headers"])
+                }, null, 8, ["columns", "col-filter-values"])
               ]),
               _: 1
             })
@@ -17016,14 +16886,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const FilterControl = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "data-v-178504c8"]]);
+const FilterControl = /* @__PURE__ */ _export_sfc$1(_sfc_main$c, [["__scopeId", "data-v-3cd94230"]]);
 
-const _hoisted_1$6 = { class: "body" };
+const _hoisted_1$7 = { class: "body" };
 const NONE_COLUMN_VALUE = "None";
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "SortControl",
   props: {
-    sortConfig: {},
+    colSortValues: {},
     sortControlOptions: {}
   },
   emits: ["columnSort"],
@@ -17032,10 +16902,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const sortPopoverRef = useTemplateRef("sortPopoverRef");
     const selectedColumn = ref(
-      props.sortConfig?.sortColumn?.toString() ?? NONE_COLUMN_VALUE
+      props.colSortValues?.[0]?.id?.toString() ?? NONE_COLUMN_VALUE
     );
     watch(
-      () => props.sortConfig?.sortColumn,
+      () => props.colSortValues?.[0]?.id,
       (val) => {
         if (val === void 0 && selectedColumn.value !== void 0) {
           return;
@@ -17044,7 +16914,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
     );
     const hasSortConfig = computed(
-      () => props.sortConfig !== void 0 && props.sortConfig.sortColumn !== void 0 && props.sortConfig.sortDirection !== void 0
+      () => props.colSortValues !== void 0 && props.colSortValues[0]?.id !== void 0 && props.colSortValues[0]?.direction !== void 0
     );
     const possibleColumns = computed(() => [
       { id: NONE_COLUMN_VALUE, text: NONE_COLUMN_VALUE },
@@ -17054,31 +16924,31 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       () => selectedColumn.value === NONE_COLUMN_VALUE ? [] : props.sortControlOptions.selectableDirections[selectedColumn.value] ?? []
     );
     const selectedSortDirection = computed(
-      () => props.sortConfig?.sortDirection?.toString() ?? ""
+      () => props.colSortValues?.[0]?.direction?.toString() ?? ""
     );
     const { buttonIsActive, showPopover, onButtonClick, onPopoverToggle } = useButtonPopoverInteraction({ keepButtonActive: hasSortConfig });
-    const onSortColumnChange = (colInd) => {
-      selectedColumn.value = colInd;
-      if (colInd === NONE_COLUMN_VALUE) {
+    const onSortColumnChange = (columnId) => {
+      selectedColumn.value = columnId;
+      if (columnId === NONE_COLUMN_VALUE) {
         emit("columnSort", void 0, 0);
         return;
       }
       emit(
         "columnSort",
-        Number.parseInt(colInd, 10),
-        props.sortConfig?.sortDirection || 1
+        columnId,
+        props.colSortValues?.[0]?.direction || 1
       );
     };
     const onSortDirectionChange = (direction) => {
       emit(
         "columnSort",
-        Number.parseInt(selectedColumn.value, 10),
+        selectedColumn.value,
         Number.parseInt(direction, 10)
       );
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(_sfc_main$1p), {
+        createVNode(unref(_sfc_main$1s), {
           "model-value": unref(buttonIsActive),
           label: "Sorting",
           size: "small",
@@ -17111,14 +16981,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 _cache[0] || (_cache[0] = createTextVNode(" Sorting ", -1))
               ]),
               body: withCtx(() => [
-                createElementVNode("div", _hoisted_1$6, [
-                  createVNode(unref(_sfc_main$z), {
+                createElementVNode("div", _hoisted_1$7, [
+                  createVNode(unref(_sfc_main$A), {
                     "model-value": selectedColumn.value,
                     "possible-values": possibleColumns.value,
                     ariaLabel: "Column to sort by",
                     "onUpdate:modelValue": onSortColumnChange
                   }, null, 8, ["model-value", "possible-values"]),
-                  createVNode(unref(_sfc_main$z), {
+                  createVNode(unref(_sfc_main$A), {
                     "model-value": selectedSortDirection.value,
                     "possible-values": possibleDirections.value,
                     ariaLabel: "Sort direction",
@@ -17138,9 +17008,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const SortControl = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-80bf221a"]]);
+const SortControl = /* @__PURE__ */ _export_sfc$1(_sfc_main$b, [["__scopeId", "data-v-ad5ee20c"]]);
 
-const _hoisted_1$5 = { class: "left" };
+const _hoisted_1$6 = { class: "left" };
 const _hoisted_2$3 = {
   key: 0,
   class: "title"
@@ -17150,7 +17020,7 @@ const _hoisted_3$2 = {
   class: "dimension"
 };
 const _hoisted_4$1 = { class: "right" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TableActionBar",
   props: {
     allRowsCount: { default: 0 },
@@ -17160,19 +17030,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     rowLabel: { default: "Rows" },
     title: { default: "" },
     showTableSize: { type: Boolean, default: true },
-    showFilterControl: { type: Boolean },
-    showSortControl: { type: Boolean },
-    sortConfig: {},
+    actionConfig: {},
+    colSortValues: { default: () => [] },
+    colFilterValues: {},
     sortControlOptions: {},
-    filterConfigs: {},
-    columnHeaders: {},
-    settingsItems: { default: () => [] }
+    columns: {}
   },
   emits: ["resetTemporaryView", "columnFilter", "onColumnSort"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const isTemporaryView = computed(() => __props.title === "Temporary view");
     const hasContent = computed(
-      () => Boolean(__props.title) || __props.showTableSize || __props.showSortControl || __props.showFilterControl
+      () => Boolean(__props.title) || __props.showTableSize || __props.actionConfig.enableSorting || __props.actionConfig.enableFilters
     );
     const hasRows = computed(() => __props.allRowsCount > 0);
     const shouldAppendOfRows = computed(() => __props.filteredRowsCount < __props.allRowsCount);
@@ -17181,7 +17049,6 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const shouldAppendOfColumns = computed(
       () => __props.filteredColumnsCount < __props.allColumnsCount
     );
-    const hasSettingsItems = computed(() => __props.settingsItems.length > 0);
     const formatCount = (label, filteredCount, totalCount, appendTotal) => `${label}: ${filteredCount}${appendTotal ? ` of ${totalCount}` : ""}`;
     const dimensionText = computed(() => {
       if (!hasRows.value && !hasColumns.value) {
@@ -17217,34 +17084,34 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         key: 0,
         class: normalizeClass(["kds-table-action-bar", { "temporary-view": isTemporaryView.value }])
       }, [
-        createElementVNode("div", _hoisted_1$5, [
+        createElementVNode("div", _hoisted_1$6, [
           __props.title ? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
           __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true),
-          __props.showSortControl ? (openBlock(), createBlock(SortControl, {
+          __props.actionConfig.enableSorting ? (openBlock(), createBlock(SortControl, {
             key: 2,
-            "sort-config": __props.sortConfig,
+            "col-sort-values": __props.colSortValues,
             "sort-control-options": __props.sortControlOptions,
-            onColumnSort: _cache[0] || (_cache[0] = (colInd, colDir) => emit("onColumnSort", colInd, colDir))
-          }, null, 8, ["sort-config", "sort-control-options"])) : createCommentVNode("", true),
-          __props.showFilterControl ? (openBlock(), createBlock(FilterControl, {
+            onColumnSort: _cache[0] || (_cache[0] = (columnId, colDir) => emit("onColumnSort", columnId, colDir))
+          }, null, 8, ["col-sort-values", "sort-control-options"])) : createCommentVNode("", true),
+          __props.actionConfig.enableFilters ? (openBlock(), createBlock(FilterControl, {
             key: 3,
             ref_key: "filterControlRef",
             ref: filterControlRef,
-            "filter-configs": __props.filterConfigs,
-            "column-headers": __props.columnHeaders,
+            columns: __props.columns,
+            "col-filter-values": __props.colFilterValues,
             onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => emit("columnFilter", colInd, value))
-          }, null, 8, ["filter-configs", "column-headers"])) : createCommentVNode("", true)
+          }, null, 8, ["columns", "col-filter-values"])) : createCommentVNode("", true)
         ]),
         createElementVNode("div", _hoisted_4$1, [
-          hasSettingsItems.value ? (openBlock(), createBlock(unref(_sfc_main$1h), {
+          __props.actionConfig.settingsItems?.length ? (openBlock(), createBlock(unref(_sfc_main$1k), {
             key: 0,
             ariaLabel: "Table settings",
             size: "small",
             variant: "transparent",
             "leading-icon": "parameter",
-            items: __props.settingsItems
+            items: __props.actionConfig.settingsItems
           }, null, 8, ["items"])) : createCommentVNode("", true),
-          isTemporaryView.value ? (openBlock(), createBlock(unref(_sfc_main$1s), {
+          isTemporaryView.value ? (openBlock(), createBlock(unref(_sfc_main$1v), {
             key: 1,
             ariaLabel: "Reset to Nodeoutput",
             size: "small",
@@ -17258,7 +17125,93 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const TableActionBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-8cfb3c41"]]);
+const TableActionBar = /* @__PURE__ */ _export_sfc$1(_sfc_main$a, [["__scopeId", "data-v-4a59722f"]]);
+
+const useHeaderMenuItems = ({
+  enableSorting,
+  enableFilters,
+  filterConfig,
+  filterValue,
+  sortDirection,
+  headerSubMenuItems,
+  sortTexts,
+  onColumnSort,
+  openFilterControl,
+  clearFilter
+}) => {
+  const staticItems = [];
+  const hasDynamicItems = Boolean(headerSubMenuItems?.length);
+  const showFilterItem = enableFilters && filterConfig !== void 0;
+  const filterIsActive = showFilterItem && isActive(filterConfig, filterValue);
+  if (enableSorting) {
+    staticItems.push({
+      id: "table-header-sort",
+      text: "Sort this column",
+      accessory: {
+        type: "icon",
+        name: "sort-ascending"
+      },
+      separator: !showFilterItem && hasDynamicItems,
+      children: [
+        {
+          id: "sort-asc",
+          text: sortTexts.ascending,
+          handler: (_item, _event) => {
+            onColumnSort(1);
+          },
+          trailingIcon: sortDirection === 1 ? "checkmark" : void 0
+        },
+        {
+          id: "sort-desc",
+          text: sortTexts.descending,
+          handler: (_item, _event) => {
+            onColumnSort(-1);
+          },
+          trailingIcon: sortDirection === -1 ? "checkmark" : void 0
+        },
+        {
+          id: "sort-none",
+          text: "No sorting",
+          handler: (_item, _event) => {
+            onColumnSort(0);
+          },
+          trailingIcon: sortDirection === 0 ? "checkmark" : void 0
+        }
+      ]
+    });
+  }
+  if (showFilterItem) {
+    if (filterIsActive) {
+      staticItems.push({
+        id: "table-header-clear-filter",
+        text: "Clear filter",
+        separator: hasDynamicItems,
+        accessory: {
+          type: "icon",
+          name: "filter"
+        },
+        handler: (_item, _event) => {
+          clearFilter();
+        }
+      });
+    } else {
+      staticItems.push({
+        id: "table-header-filter",
+        text: "Filter by this column",
+        separator: hasDynamicItems,
+        accessory: {
+          type: "icon",
+          name: "filter"
+        },
+        handler: (_item, _event) => {
+          openFilterControl();
+        }
+      });
+    }
+  }
+  const menuItems = [...staticItems, ...headerSubMenuItems ?? []];
+  return menuItems.length ? menuItems : void 0;
+};
 
 const AUTO_SCROLL_EDGE_SIZE = 20;
 const AUTO_SCROLL_SPEED = 250;
@@ -17313,42 +17266,289 @@ const useAutoScrollOnRightEdge = ({
   return { onPointerDown, onPointerMove, onPointerUp };
 };
 
+const _hoisted_1$5 = ["tabindex"];
+const _hoisted_2$2 = ["title"];
+const _hoisted_3$1 = {
+  key: 0,
+  class: "sub-header-text-container"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "delete-column-button"
+};
+const _hoisted_5 = { key: 1 };
+const columnMenuButtonRef = "columnMenuButton";
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "HeaderCell",
+  props: {
+    column: {},
+    colFilterValue: {},
+    tableConfig: {},
+    actionConfig: {},
+    sortDirection: {},
+    columnSize: {},
+    focused: { type: Boolean },
+    selected: { type: Boolean },
+    otherColumnResizing: { type: Boolean },
+    getDragHandleHeight: { type: Function }
+  },
+  emits: ["onColumnSort", "openActionBarFilterControl", "clearColumnFilter", "onHeaderCellFocus", "onHeaderCellBlur", "onHeaderClick", "onKeydownTab", "onKeydownLeft", "onKeydownRight", "onKeydownDown", "onHeaderCellKeydown", "onDeleteColumn", "columnResizeStart", "columnResizeEnd", "columnResize", "allColumnsResize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const columnHeader = useTemplateRef("columnHeader");
+    const content = useTemplateRef("content");
+    const mainHeader = useTemplateRef("mainHeader");
+    const headerText = useTemplateRef("headerText");
+    const columnDeleteButton = useTemplateRef("columnDeleteButton");
+    const columnMenuButton = useTemplateRef(columnMenuButtonRef);
+    const subMenuItems = computed(
+      () => useHeaderMenuItems({
+        enableFilters: Boolean(props.actionConfig.enableFilters),
+        filterConfig: props.column.filterConfig,
+        filterValue: props.colFilterValue,
+        enableSorting: Boolean(props.actionConfig.enableSorting) && !props.column.isNotSortable,
+        sortDirection: props.sortDirection,
+        sortTexts: columnSortText[props.column.type ?? "default"],
+        headerSubMenuItems: props.column.headerSubMenuItems,
+        onColumnSort: (direction) => emit("onColumnSort", direction),
+        openFilterControl: () => emit("openActionBarFilterControl"),
+        clearFilter: () => emit("clearColumnFilter")
+      })
+    );
+    const hovered = ref(false);
+    const onPointerOver = () => {
+      hovered.value = true;
+    };
+    const onPointerLeave = () => {
+      hovered.value = false;
+    };
+    const dragging = ref(false);
+    let columnSizeOnDragStart = 0;
+    let pageXOnDragStart = 0;
+    let currentPageX = 0;
+    let currentDragHandlerHeight = 0;
+    const scrollContainer = useScrollContainer();
+    const autoScrollOffset = ref(0);
+    const emitColumnResize = () => {
+      if (!dragging.value) {
+        return;
+      }
+      const newColumnSize = columnSizeOnDragStart + (currentPageX - pageXOnDragStart) + autoScrollOffset.value;
+      emit("columnResize", Math.max(newColumnSize, MIN_COLUMN_SIZE));
+    };
+    const {
+      onPointerDown: startAutoScroll,
+      onPointerMove: updateAutoScroll,
+      onPointerUp: stopAutoScroll
+    } = useAutoScrollOnRightEdge({
+      scrollContainer,
+      autoScrollOffset,
+      onAutoScroll: emitColumnResize
+    });
+    const currentResizeDragHandleWidth = computed(
+      () => props.tableConfig.enableColumnResizing ? COLUMN_RESIZE_DRAG_HANDLE_WIDTH : 0
+    );
+    const dragHandleHeight = (isDragging) => isDragging ? currentDragHandlerHeight : HEADER_HEIGHT;
+    const onPointerDown = (event) => {
+      consola.debug("Resize via drag triggered: ", event);
+      event.stopPropagation();
+      event.target.setPointerCapture(event.pointerId);
+      dragging.value = true;
+      currentDragHandlerHeight = props.getDragHandleHeight();
+      columnSizeOnDragStart = props.columnSize ?? MIN_COLUMN_SIZE;
+      pageXOnDragStart = event.pageX;
+      currentPageX = event.pageX;
+      emit("columnResizeStart");
+      startAutoScroll(event.clientX);
+    };
+    const onPointerUp = (event) => {
+      emit("columnResizeEnd");
+      if (event.shiftKey) {
+        const newColumnSize = columnSizeOnDragStart + event.pageX - pageXOnDragStart + autoScrollOffset.value;
+        emit("allColumnsResize", Math.max(newColumnSize, MIN_COLUMN_SIZE));
+      }
+      stopAutoScroll();
+    };
+    const unthrottledOnPointerMove = (event) => {
+      if (dragging.value) {
+        consola.debug("Resize via drag ongoing: ", event);
+        currentPageX = event.pageX;
+        emitColumnResize();
+        updateAutoScroll(event.clientX);
+      }
+    };
+    const onPointerMove = throttle((event) => {
+      unthrottledOnPointerMove(event);
+    });
+    const onLostPointerCapture = throttle((event) => {
+      consola.debug("Resize via drag finished: ", event);
+      stopAutoScroll();
+      dragging.value = false;
+      hovered.value = false;
+    });
+    const getHeaderCellWidth = () => {
+      const widthCompleteHeader = Math.ceil(
+        columnHeader.value.getBoundingClientRect().width
+      );
+      const widthMainHeader = Math.ceil(
+        mainHeader.value.getBoundingClientRect().width
+      );
+      const widthHeaderText = headerText.value.getBoundingClientRect().width;
+      return widthCompleteHeader - widthMainHeader + widthHeaderText + currentResizeDragHandleWidth.value;
+    };
+    const focus = () => {
+      if (props.tableConfig.enableHeaderCellSelection || props.column.editable) {
+        content.value?.focus();
+      } else if (subMenuItems.value?.length) {
+        columnMenuButton.value?.menuButtonEl?.$el?.focus();
+      } else if (props.column.deletable) {
+        columnDeleteButton.value?.$el?.focus();
+      }
+    };
+    const isFocusable = () => Boolean(
+      props.tableConfig.enableHeaderCellSelection || props.column.editable || subMenuItems.value?.length || props.column.deletable
+    );
+    __expose({ getHeaderCellWidth, focus, isFocusable });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        ref_key: "columnHeader",
+        ref: columnHeader,
+        scope: "col",
+        style: normalizeStyle({
+          width: `calc(${__props.columnSize || unref(MIN_COLUMN_SIZE)}px)`,
+          ...__props.column.headerColor ? { "--data-cell-color": __props.column.headerColor } : {}
+        }),
+        class: normalizeClass([
+          "column-header",
+          {
+            "colored-header": __props.column.headerColor,
+            "header-focused": __props.focused || __props.selected
+          }
+        ])
+      }, [
+        createElementVNode("div", {
+          ref_key: "content",
+          ref: content,
+          class: normalizeClass(["column-header-content", [
+            {
+              "with-button-in-header": subMenuItems.value?.length || __props.column.deletable
+            }
+          ]]),
+          tabindex: __props.tableConfig.enableHeaderCellSelection || __props.column.editable ? 0 : -1,
+          onFocus: _cache[0] || (_cache[0] = ($event) => emit("onHeaderCellFocus")),
+          onBlur: _cache[1] || (_cache[1] = ($event) => emit("onHeaderCellBlur")),
+          onClick: _cache[2] || (_cache[2] = ($event) => emit("onHeaderClick")),
+          onKeydown: [
+            _cache[3] || (_cache[3] = withKeys(($event) => emit("onHeaderClick"), ["space"])),
+            _cache[4] || (_cache[4] = withKeys(($event) => emit("onKeydownTab"), ["tab"])),
+            _cache[5] || (_cache[5] = withKeys(withModifiers(($event) => emit("onKeydownLeft"), ["prevent"]), ["left"])),
+            _cache[6] || (_cache[6] = withKeys(withModifiers(($event) => emit("onKeydownRight"), ["prevent"]), ["right"])),
+            _cache[7] || (_cache[7] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["self", "prevent"]), ["down"])),
+            _cache[8] || (_cache[8] = ($event) => emit("onHeaderCellKeydown", $event))
+          ]
+        }, [
+          createElementVNode("div", {
+            ref_key: "mainHeader",
+            ref: mainHeader,
+            class: "main-header"
+          }, [
+            createElementVNode("div", {
+              class: "header-text-container",
+              title: __props.column.header
+            }, [
+              createElementVNode("span", {
+                ref_key: "headerText",
+                ref: headerText
+              }, toDisplayString(__props.column.header), 513)
+            ], 8, _hoisted_2$2)
+          ], 512),
+          __props.column.subHeader ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            renderSlot(_ctx.$slots, "subHeader", {
+              subHeader: __props.column.subHeader
+            }, () => [
+              createTextVNode(toDisplayString(__props.column.subHeader), 1)
+            ], true)
+          ])) : createCommentVNode("", true)
+        ], 42, _hoisted_1$5),
+        __props.column.deletable ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createVNode(unref(_sfc_main$1v), {
+            ref_key: "columnDeleteButton",
+            ref: columnDeleteButton,
+            variant: "transparent",
+            "leading-icon": "trash",
+            size: "small",
+            ariaLabel: "Delete column",
+            onClick: _cache[9] || (_cache[9] = withModifiers(($event) => emit("onDeleteColumn"), ["stop"])),
+            onKeydown: _cache[10] || (_cache[10] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
+          }, null, 512)
+        ])) : createCommentVNode("", true),
+        subMenuItems.value?.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createVNode(unref(_sfc_main$1k), {
+            ref: columnMenuButtonRef,
+            ariaLabel: "Table column options",
+            items: subMenuItems.value,
+            size: "small",
+            variant: "transparent",
+            "leading-icon": "more-actions",
+            onKeydown: _cache[11] || (_cache[11] = withKeys(withModifiers(($event) => emit("onKeydownDown"), ["prevent", "stop"]), ["down"]))
+          }, null, 8, ["items"])
+        ])) : createCommentVNode("", true),
+        __props.tableConfig.enableColumnResizing ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass([
+            "resize-handle-area",
+            { hover: hovered.value && !__props.otherColumnResizing, drag: dragging.value }
+          ]),
+          style: normalizeStyle({
+            height: `${dragHandleHeight(dragging.value)}px`
+          }),
+          onPointerover: onPointerOver,
+          onPointerleave: onPointerLeave,
+          onPointerdownPassive: _cache[12] || (_cache[12] = ($event) => onPointerDown($event)),
+          onPointerupPassive: _cache[13] || (_cache[13] = ($event) => onPointerUp($event)),
+          onPointermove: _cache[14] || (_cache[14] = //@ts-ignore
+          (...args) => unref(onPointerMove) && unref(onPointerMove)(...args)),
+          onLostpointercapture: _cache[15] || (_cache[15] = //@ts-ignore
+          (...args) => unref(onLostPointerCapture) && unref(onLostPointerCapture)(...args))
+        }, [..._cache[16] || (_cache[16] = [
+          createElementVNode("span", { class: "resize-handle" }, null, -1)
+        ])], 38)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+
+const HeaderCell = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-b99ef494"]]);
+
 const _sfc_main$8 = {
   components: {
-    KdsCheckbox: _sfc_main$10,
-    KdsButton: _sfc_main$1s,
-    KdsMenuButton: _sfc_main$1h
+    KdsCheckbox: _sfc_main$13,
+    KdsButton: _sfc_main$1v,
+    HeaderCell
   },
   props: {
     tableConfig: {
       type: Object,
       default: () => ({})
     },
-    columnHeaders: {
-      type: Array,
-      default: () => []
-    },
-    columnSubHeaders: {
-      type: Array,
-      default: () => []
-    },
-    columnSizes: {
-      type: Array,
-      default: () => []
+    actionConfig: {
+      type: Object,
+      default: () => ({})
     },
-    columnSubMenuItems: {
+    columns: {
       type: Array,
       default: () => []
     },
-    columnHeaderColors: {
-      type: Array,
-      default: () => []
+    colFilterValues: {
+      type: Object,
+      default: () => ({})
     },
-    columnDeletables: {
+    colSizes: {
       type: Array,
       default: () => []
     },
-    columnEditables: {
+    colSortValues: {
       type: Array,
       default: () => []
     },
@@ -17378,6 +17578,9 @@ const _sfc_main$8 = {
     columnResizeEnd: () => true,
     columnResizeStart: () => true,
     allColumnsResize: (newSize) => true,
+    columnSort: (index, direction) => true,
+    openActionBarFilterControl: (index) => true,
+    clearColumnFilter: (index) => true,
     moveDownFromHeaderCell: (index) => true,
     headerCellSelect: (index) => true,
     "update:newColumnButtonWidth": (width) => true,
@@ -17389,33 +17592,7 @@ const _sfc_main$8 = {
     deleteColumn: (index) => true
   },
   setup(props, { emit }) {
-    const { indexedData: indexedColumnHeaders, style: headerStyles } = useIndicesAndStylesFor(toRef(props, "columnHeaders"));
-    const scrollContainer = useScrollContainer();
-    const dragIndex = ref(null);
-    const columnSizeOnDragStart = ref(0);
-    const pageXOnDragStart = ref(0);
-    const currentPageX = ref(0);
-    const autoScrollOffset = ref(0);
-    const emitColumnResize = () => {
-      if (dragIndex.value === null) {
-        return;
-      }
-      const newColumnSize = columnSizeOnDragStart.value + (currentPageX.value - pageXOnDragStart.value) + autoScrollOffset.value;
-      emit(
-        "columnResize",
-        dragIndex.value,
-        Math.max(newColumnSize, MIN_COLUMN_SIZE)
-      );
-    };
-    const {
-      onPointerDown: startAutoScroll,
-      onPointerMove: updateAutoScroll,
-      onPointerUp: stopAutoScroll
-    } = useAutoScrollOnRightEdge({
-      scrollContainer,
-      autoScrollOffset,
-      onAutoScroll: emitColumnResize
-    });
+    const { indexedData: indexedColumns, style: headerStyles } = useIndicesAndStylesFor(toRef(props, "columns"));
     let currentColumnIndex = 0;
     const onStartEditing = (initialValue) => {
       emit("headerCellStartEditing", currentColumnIndex, initialValue);
@@ -17428,51 +17605,20 @@ const _sfc_main$8 = {
       currentColumnIndex = columnIndex;
       startEditingKeydown(event);
     };
-    return {
-      indexedColumnHeaders,
-      headerStyles,
-      onHeaderCellKeydown,
-      scrollContainer,
-      dragIndex,
-      columnSizeOnDragStart,
-      pageXOnDragStart,
-      currentPageX,
-      autoScrollOffset,
-      emitColumnResize,
-      startAutoScroll,
-      updateAutoScroll,
-      stopAutoScroll
-    };
+    return { indexedColumns, headerStyles, onHeaderCellKeydown };
   },
   /* eslint-enable @typescript-eslint/no-unused-vars  */
   data() {
     return {
-      hoverIndex: null,
-      // the index of the column that is currently being hovered over; null during resize
       minimumColumnWidth: MIN_COLUMN_SIZE,
       // need to add this here since it is referenced in the template
-      maximumSubMenuWidth: MAX_SUB_MENU_WIDTH,
-      currentDragHandlerHeight: 0,
-      borderTop: kdsSpacingContainer0p10x,
+      resizingColumnIndex: null,
+      // the index of the column that is currently being resized; null otherwise
       focusedHeaderIndex: null
       // the index of the currently focused header cell
     };
   },
   computed: {
-    enableColumnResizing() {
-      const enableColumnResizingSetting = this.tableConfig.enableColumnResizing;
-      if (enableColumnResizingSetting === void 0) {
-        return true;
-      } else {
-        return enableColumnResizingSetting;
-      }
-    },
-    hasSubHeaders() {
-      return this.columnSubHeaders.some(Boolean);
-    },
-    currentResizeDragHandleWidth() {
-      return this.enableColumnResizing ? COLUMN_RESIZE_DRAG_HANDLE_WIDTH : 0;
-    },
     headerSelectionOverlayStyle() {
       const columnIndex = this.selectedHeaderIndex;
       if (columnIndex === null || !this.tableConfig.enableHeaderCellSelection) {
@@ -17482,16 +17628,13 @@ const _sfc_main$8 = {
       if (this.tableConfig.showSelection) {
         left += SPECIAL_COLUMNS_SIZE;
       }
-      if (this.tableConfig.showCollapser) {
-        left += SPECIAL_COLUMNS_SIZE;
-      }
       if (this.tableConfig.enableRowDeletion) {
         left += SPECIAL_COLUMNS_SIZE;
       }
       for (let i = 0; i < columnIndex; i++) {
-        left += this.columnSizes[i];
+        left += this.columnSize(i);
       }
-      const width = this.columnSizes[columnIndex];
+      const width = this.columnSize(columnIndex);
       return {
         left: `${left}px`,
         width: `${width}px`
@@ -17499,8 +17642,15 @@ const _sfc_main$8 = {
     }
   },
   methods: {
+    columnSize(columnIndex) {
+      return this.colSizes[columnIndex] ?? this.minimumColumnWidth;
+    },
+    sortDirection(columnIndex) {
+      const columnId = this.columns[columnIndex].id;
+      return this.colSortValues.find(({ id }) => id === columnId)?.direction ?? 0;
+    },
     onHeaderCellFocus(columnIndex) {
-      if (!this.tableConfig.enableHeaderCellSelection && !this.columnEditables[columnIndex]) {
+      if (!this.tableConfig.enableHeaderCellSelection && !this.columns[columnIndex].editable) {
         return;
       }
       this.focusedHeaderIndex = columnIndex;
@@ -17508,7 +17658,7 @@ const _sfc_main$8 = {
     },
     onHeaderCellBlur(columnIndex) {
       this.focusedHeaderIndex = null;
-      if (!this.columnEditables[columnIndex]) {
+      if (!this.columns[columnIndex].editable) {
         this.$emit("headerCellDeselect");
       }
     },
@@ -17526,90 +17676,46 @@ const _sfc_main$8 = {
       if (this.tableConfig.enableHeaderCellSelection && this.selectedHeaderIndex !== ind) {
         this.$emit("headerCellSelect", ind);
       }
-      if (this.columnEditables[ind]) {
+      if (this.columns[ind].editable) {
         this.$emit("headerCellStartEditing", ind);
       }
     },
-    onPointerOver(event, columnIndex) {
-      consola.debug("Begin hover over drag handle: ", event);
-      if (this.dragIndex === null) {
-        this.hoverIndex = columnIndex;
-      }
-    },
-    onPointerLeave(event) {
-      consola.debug("End hover over drag handle: ", event);
-      if (this.dragIndex === null) {
-        this.hoverIndex = null;
-      }
-    },
-    onPointerDown(event, columnIndex) {
-      consola.debug("Resize via drag triggered: ", event);
-      event.stopPropagation();
-      event.target.setPointerCapture(event.pointerId);
-      this.dragIndex = columnIndex;
-      this.currentDragHandlerHeight = this.getDragHandleHeight();
-      this.columnSizeOnDragStart = this.columnSizes[columnIndex];
-      this.pageXOnDragStart = event.pageX;
-      this.currentPageX = event.pageX;
+    onColumnResizeStart(columnIndex) {
+      this.resizingColumnIndex = columnIndex;
       this.$emit("columnResizeStart");
-      this.startAutoScroll(event.clientX);
     },
-    onPointerUp(event) {
+    onColumnResizeEnd() {
+      this.resizingColumnIndex = null;
       this.$emit("columnResizeEnd");
-      if (event.shiftKey) {
-        const newColumnSize = this.columnSizeOnDragStart + event.pageX - this.pageXOnDragStart + this.autoScrollOffset;
-        this.$emit(
-          "allColumnsResize",
-          Math.max(newColumnSize, this.minimumColumnWidth)
-        );
-      }
-      this.stopAutoScroll();
     },
-    /* eslint-disable no-invalid-this */
-    onPointerMove: throttle(function(event) {
-      this.unthrottledOnPointerMove(event);
-    }),
+    onColumnResize(columnIndex, newSize) {
+      this.$emit("columnResize", columnIndex, newSize);
+    },
+    onAllColumnsResize(newSize) {
+      this.$emit("allColumnsResize", newSize);
+    },
+    onColumnSort(columnIndex, direction) {
+      this.$emit("columnSort", columnIndex, direction);
+    },
+    onOpenActionBarFilterControl(columnIndex) {
+      this.$emit("openActionBarFilterControl", columnIndex);
+    },
+    onClearColumnFilter(columnIndex) {
+      this.$emit("clearColumnFilter", columnIndex);
+    },
     onNewColumnButtonClick(event) {
       this.$emit("newColumnButtonClick", event);
     },
     onNewColumnButtonKeydownLeft(event) {
       this.$emit("newColumnButtonKeydownLeft", event);
     },
-    unthrottledOnPointerMove(event) {
-      if (this.dragIndex !== null) {
-        consola.debug("Resize via drag ongoing: ", event);
-        this.currentPageX = event.pageX;
-        this.emitColumnResize();
-        this.updateAutoScroll(event.clientX);
-      }
-    },
-    /* The lostpointercapture event is triggered if the pointer capture is lost for any reason, including its
-        orderly release via a pointerup event. Because the onPointerMove function is throttled we also need to throttle
-        the onLostPointerCapture function to guarantee order of event handling. */
-    onLostPointerCapture: throttle(function(event) {
-      consola.debug("Resize via drag finished: ", event);
-      this.stopAutoScroll();
-      this.dragIndex = null;
-      this.hoverIndex = null;
-    }),
-    /* eslint-enable no-invalid-this */
-    dragHandleHeight(isDragging) {
-      return isDragging ? this.currentDragHandlerHeight : HEADER_HEIGHT;
-    },
     onDeleteColumn(ind) {
       this.$emit("deleteColumn", ind);
     },
     getHeaderCellWidths() {
-      return this.columnHeaders.map((_, columnIndex) => {
-        const widthCompleteHeader = Math.ceil(
-          this.$refs[`columnHeader-${columnIndex}`][0].getBoundingClientRect().width
-        );
-        const widthMainHeader = Math.ceil(
-          this.$refs[`mainHeader-${columnIndex}`][0].getBoundingClientRect().width
-        );
-        const widthHeaderText = this.$refs[`headerText-${columnIndex}`][0].getBoundingClientRect().width;
-        return widthCompleteHeader - widthMainHeader + widthHeaderText + this.currentResizeDragHandleWidth;
-      });
+      return this.columns.map(
+        (_column, columnIndex) => this.$refs[`headerCell-${columnIndex}`][0].getHeaderCellWidth()
+      );
     },
     /**
      * We deliberately only react on Tab and not on blur since we do
@@ -17625,7 +17731,7 @@ const _sfc_main$8 = {
       }
     },
     onKeydownRight(columnIndex) {
-      if (columnIndex < this.columnHeaders.length - 1) {
+      if (columnIndex < this.columns.length - 1) {
         this.focusHeaderCell(columnIndex + 1);
       } else if (this.showNewColumnButton) {
         if (this.tableConfig.enableHeaderCellSelection) {
@@ -17640,13 +17746,10 @@ const _sfc_main$8 = {
       }
     },
     focusHeaderCell(cellInd) {
-      if (this.tableConfig.enableHeaderCellSelection || this.columnEditables[cellInd]) {
-        this.$refs[`columnHeaderContent-${cellInd}`][0].focus();
-      } else if (this.columnSubMenuItems[cellInd]?.length) {
-        this.$refs[`columnMenuButton-${cellInd}`]?.[0]?.menuButtonEl?.$el?.focus();
-      } else if (this.columnDeletables[cellInd]) {
-        this.$refs[`columnDeleteButton-${cellInd}`]?.[0]?.$el?.focus();
-      }
+      this.$refs[`headerCell-${cellInd}`][0].focus();
+    },
+    isColumnHeaderFocusable(cellInd) {
+      return this.$refs[`headerCell-${cellInd}`][0].isFocusable();
     },
     focusNewColumnButton() {
       this.$refs["new-column-button"]?.$el.focus();
@@ -17663,22 +17766,10 @@ const _hoisted_1$4 = {
   class: "deletion-cell-spacer",
   "aria-label": "Delete row"
 };
-const _hoisted_2$2 = ["tabindex", "onFocus", "onBlur", "onClick", "onKeydown"];
-const _hoisted_3$1 = ["title"];
-const _hoisted_4 = {
-  key: 0,
-  class: "sub-header-text-container"
-};
-const _hoisted_5 = {
-  key: 0,
-  class: "delete-column-button"
-};
-const _hoisted_6 = { key: 1 };
-const _hoisted_7 = ["onPointerover", "onPointerdownPassive"];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_KdsCheckbox = resolveComponent("KdsCheckbox");
+  const _component_HeaderCell = resolveComponent("HeaderCell");
   const _component_KdsButton = resolveComponent("KdsButton");
-  const _component_KdsMenuButton = resolveComponent("KdsMenuButton");
   return openBlock(), createElementBlock("thead", null, [
     createElementVNode("tr", {
       style: normalizeStyle({ ...$setup.headerStyles })
@@ -17699,112 +17790,43 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           "onUpdate:modelValue": $options.onSelect
         }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
       ], 32)) : createCommentVNode("", true),
-      (openBlock(true), createElementBlock(Fragment, null, renderList($setup.indexedColumnHeaders, ([header, ind]) => {
-        return openBlock(), createElementBlock("th", {
+      (openBlock(true), createElementBlock(Fragment, null, renderList($setup.indexedColumns, ([column, ind]) => {
+        return openBlock(), createBlock(_component_HeaderCell, {
           key: ind,
           ref_for: true,
-          ref: `columnHeader-${ind}`,
-          scope: "col",
-          style: normalizeStyle({
-            width: `calc(${$props.columnSizes[ind] || $data.minimumColumnWidth}px)`,
-            ...$props.columnHeaderColors[ind] ? { "--data-cell-color": $props.columnHeaderColors[ind] } : {}
-          }),
-          class: normalizeClass([
-            "column-header",
-            {
-              "colored-header": $props.columnHeaderColors[ind],
-              "header-focused": $data.focusedHeaderIndex === ind || $props.selectedHeaderIndex === ind
-            }
-          ])
-        }, [
-          createElementVNode("div", {
-            ref_for: true,
-            ref: `columnHeaderContent-${ind}`,
-            class: normalizeClass(["column-header-content", [
-              {
-                "with-button-in-header": $props.columnSubMenuItems[ind] || $props.columnDeletables[ind]
-              }
-            ]]),
-            tabindex: $props.tableConfig.enableHeaderCellSelection || $props.columnEditables[ind] ? 0 : -1,
-            onFocus: ($event) => $options.onHeaderCellFocus(ind),
-            onBlur: ($event) => $options.onHeaderCellBlur(ind),
-            onClick: ($event) => $options.onHeaderClick(ind),
-            onKeydown: [
-              withKeys(($event) => $options.onHeaderClick(ind), ["space"]),
-              _cache[1] || (_cache[1] = withKeys((...args) => $options.onKeydownTab && $options.onKeydownTab(...args), ["tab"])),
-              withKeys(withModifiers(($event) => $options.onKeydownLeft(ind), ["prevent"]), ["left"]),
-              withKeys(withModifiers(($event) => $options.onKeydownRight(ind), ["prevent"]), ["right"]),
-              withKeys(withModifiers(($event) => $options.onKeydownDown(ind), ["self", "prevent"]), ["down"]),
-              ($event) => $setup.onHeaderCellKeydown($event, ind)
-            ]
-          }, [
-            createElementVNode("div", {
-              ref_for: true,
-              ref: `mainHeader-${ind}`,
-              class: "main-header"
-            }, [
-              createElementVNode("div", {
-                class: "header-text-container",
-                title: header
-              }, [
-                createElementVNode("span", {
-                  ref_for: true,
-                  ref: `headerText-${ind}`
-                }, toDisplayString(header), 513)
-              ], 8, _hoisted_3$1)
-            ], 512),
-            $props.columnSubHeaders[ind] ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              renderSlot(_ctx.$slots, "subHeader", {
-                subHeader: $props.columnSubHeaders[ind],
-                columnIndex: ind
-              }, () => [
-                createTextVNode(toDisplayString($props.columnSubHeaders[ind]), 1)
-              ], true)
-            ])) : createCommentVNode("", true)
-          ], 42, _hoisted_2$2),
-          $props.columnDeletables[ind] ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            createVNode(_component_KdsButton, {
-              ref_for: true,
-              ref: `columnDeleteButton-${ind}`,
-              variant: "transparent",
-              "leading-icon": "trash",
-              size: "small",
-              ariaLabel: "Delete column",
-              onClick: withModifiers(($event) => $options.onDeleteColumn(ind), ["stop"]),
-              onKeydown: withKeys(withModifiers(($event) => $options.onKeydownDown(ind), ["prevent", "stop"]), ["down"])
-            }, null, 8, ["onClick", "onKeydown"])
-          ])) : createCommentVNode("", true),
-          $props.columnSubMenuItems[ind]?.length ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            createVNode(_component_KdsMenuButton, {
-              ref_for: true,
-              ref: `columnMenuButton-${ind}`,
-              ariaLabel: "Table column options",
-              items: $props.columnSubMenuItems[ind],
-              size: "small",
-              variant: "transparent",
-              "leading-icon": "more-actions",
-              onKeydown: withKeys(withModifiers(($event) => $options.onKeydownDown(ind), ["prevent", "stop"]), ["down"])
-            }, null, 8, ["items", "onKeydown"])
-          ])) : createCommentVNode("", true),
-          $options.enableColumnResizing ? (openBlock(), createElementBlock("div", {
-            key: 2,
-            class: normalizeClass([
-              "resize-handle-area",
-              { hover: $data.hoverIndex === ind, drag: $setup.dragIndex === ind }
-            ]),
-            style: normalizeStyle({
-              height: `${$options.dragHandleHeight($setup.dragIndex === ind)}px`
-            }),
-            onPointerover: ($event) => $options.onPointerOver($event, ind),
-            onPointerleave: _cache[2] || (_cache[2] = (...args) => $options.onPointerLeave && $options.onPointerLeave(...args)),
-            onPointerdownPassive: ($event) => $options.onPointerDown($event, ind),
-            onPointerupPassive: _cache[3] || (_cache[3] = ($event) => $options.onPointerUp($event)),
-            onPointermove: _cache[4] || (_cache[4] = (...args) => $options.onPointerMove && $options.onPointerMove(...args)),
-            onLostpointercapture: _cache[5] || (_cache[5] = (...args) => $options.onLostPointerCapture && $options.onLostPointerCapture(...args))
-          }, [..._cache[7] || (_cache[7] = [
-            createElementVNode("span", { class: "resize-handle" }, null, -1)
-          ])], 46, _hoisted_7)) : createCommentVNode("", true)
-        ], 6);
+          ref: `headerCell-${ind}`,
+          column,
+          "col-filter-value": $props.colFilterValues[column.id],
+          "table-config": $props.tableConfig,
+          "action-config": $props.actionConfig,
+          "sort-direction": $options.sortDirection(ind),
+          "column-size": $options.columnSize(ind),
+          focused: $data.focusedHeaderIndex === ind,
+          selected: $props.selectedHeaderIndex === ind,
+          "other-column-resizing": $data.resizingColumnIndex !== null && $data.resizingColumnIndex !== ind,
+          "get-drag-handle-height": $props.getDragHandleHeight,
+          onOnHeaderCellFocus: ($event) => $options.onHeaderCellFocus(ind),
+          onOnHeaderCellBlur: ($event) => $options.onHeaderCellBlur(ind),
+          onOnHeaderClick: ($event) => $options.onHeaderClick(ind),
+          onOnKeydownTab: $options.onKeydownTab,
+          onOnKeydownLeft: ($event) => $options.onKeydownLeft(ind),
+          onOnKeydownRight: ($event) => $options.onKeydownRight(ind),
+          onOnKeydownDown: ($event) => $options.onKeydownDown(ind),
+          onOnHeaderCellKeydown: ($event) => $setup.onHeaderCellKeydown($event, ind),
+          onOnDeleteColumn: ($event) => $options.onDeleteColumn(ind),
+          onOnColumnSort: ($event) => $options.onColumnSort(ind, $event),
+          onOpenActionBarFilterControl: ($event) => $options.onOpenActionBarFilterControl(ind),
+          onClearColumnFilter: ($event) => $options.onClearColumnFilter(ind),
+          onColumnResizeStart: ($event) => $options.onColumnResizeStart(ind),
+          onColumnResizeEnd: $options.onColumnResizeEnd,
+          onColumnResize: ($event) => $options.onColumnResize(ind, $event),
+          onAllColumnsResize: $options.onAllColumnsResize
+        }, {
+          subHeader: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "subHeader", mergeProps({ ref_for: true }, slotProps, { columnIndex: ind }), void 0, true)
+          ]),
+          _: 2
+        }, 1032, ["column", "col-filter-value", "table-config", "action-config", "sort-direction", "column-size", "focused", "selected", "other-column-resizing", "get-drag-handle-height", "onOnHeaderCellFocus", "onOnHeaderCellBlur", "onOnHeaderClick", "onOnKeydownTab", "onOnKeydownLeft", "onOnKeydownRight", "onOnKeydownDown", "onOnHeaderCellKeydown", "onOnDeleteColumn", "onOnColumnSort", "onOpenActionBarFilterControl", "onClearColumnFilter", "onColumnResizeStart", "onColumnResizeEnd", "onColumnResize", "onAllColumnsResize"]);
       }), 128)),
       $props.showNewColumnButton ? (openBlock(), createElementBlock("th", {
         key: 2,
@@ -17812,7 +17834,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         scope: "col",
         class: "new-column-head",
         "aria-label": "Add column",
-        onVnodeMounted: _cache[6] || (_cache[6] = (...args) => $options.emitNewColumnButtonWidth && $options.emitNewColumnButtonWidth(...args))
+        onVnodeMounted: _cache[1] || (_cache[1] = (...args) => $options.emitNewColumnButtonWidth && $options.emitNewColumnButtonWidth(...args))
       }, [
         createVNode(_component_KdsButton, {
           ref: "new-column-button",
@@ -17834,7 +17856,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 6)) : createCommentVNode("", true)
   ]);
 }
-const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-3b63e327"]]);
+const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-e7068bdf"]]);
 
 const _hoisted_1$3 = { class: "sticky-container" };
 const buttonRef = "button";
@@ -17851,7 +17873,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        createVNode(unref(_sfc_main$1s), {
+        createVNode(unref(_sfc_main$1v), {
           ref: buttonRef,
           label: "Add",
           "leading-icon": "plus",
@@ -17915,14 +17937,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     text: {},
     title: {},
     color: {},
-    classes: {},
     selectOnMove: { type: Boolean },
     size: {},
     defaultTopBottomPadding: {},
     defaultLeftRightPadding: {},
     enableExpand: { type: Boolean },
-    isEditing: { type: Boolean },
-    inlineBlock: { type: Boolean }
+    isEditing: { type: Boolean }
   },
   emits: ["click", "expand", "input", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -18037,11 +18057,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("td", {
         class: normalizeClass([
-          __props.classes,
           "data-cell",
           {
             "colored-cell": __props.color,
-            "inline-block": __props.inlineBlock,
             "in-cell-selection": __props.isInCellSelection
           }
         ]),
@@ -18086,25 +18104,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CellRenderer = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-698a5d81"]]);
+const CellRenderer = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-84b77b2e"]]);
 
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Cell",
   props: {
+    column: {},
     cellData: {},
     selectOnMove: { type: Boolean },
-    isSlotted: { type: Boolean },
     isSelected: { type: Boolean },
     isInCellSelection: { type: Boolean },
     isToBeExpanded: { type: Boolean },
     size: {},
-    classGenerators: {},
-    formatter: { type: Function },
     defaultTopBottomPadding: {},
     defaultLeftRightPadding: {},
-    hasDataValueView: { type: Boolean },
     isEditing: { type: Boolean },
-    inlineBlock: { type: Boolean }
+    enableDataValueView: { type: Boolean }
   },
   emits: ["click", "input", "select", "dataValueView"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -18115,35 +18130,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const unpackedValue = computed(
       () => unpackObjectRepresentation(props.cellData)
     );
-    const formattedValue = computed(
-      () => props.formatter(unpackObjectRepresentation(unpackedValue.value))
-    );
     const title = computed(() => {
       const { cellData } = props;
       if (isMissingValue(cellData)) {
         return getMissingValueMessage(cellData);
       }
-      if (formattedValue.value === void 0) {
+      if (unpackedValue.value === void 0) {
         return null;
       } else {
-        return String(formattedValue.value);
+        return String(unpackedValue.value);
       }
     });
-    const classes = computed(() => {
-      const { classGenerators } = props;
-      if (classGenerators === void 0) {
-        return [];
-      }
-      return classGenerators.map((classItem) => {
-        if (typeof classItem === "function") {
-          return unpackedValue.value === void 0 ? null : classItem(unpackedValue.value);
-        }
-        if (typeof classItem === "object") {
-          return classItem[unpackedValue.value];
-        }
-        return classItem;
-      }).filter((obj) => obj !== null);
-    });
     const cellRenderer = ref(null);
     const getCellContentDimensions = () => cellRenderer.value?.getCellContentDimensions();
     __expose({
@@ -18156,21 +18153,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         ref_key: "cellRenderer",
         ref: cellRenderer,
         "is-missing": isMissing.value,
-        "is-slotted": __props.isSlotted,
-        text: formattedValue.value,
+        "is-slotted": __props.column.hasSlotContent ?? false,
+        text: unpackedValue.value,
         title: title.value,
         color: color.value,
-        classes: classes.value,
         "select-on-move": __props.selectOnMove,
         "default-top-bottom-padding": __props.defaultTopBottomPadding,
         "default-left-right-padding": __props.defaultLeftRightPadding,
+        "no-padding-left-right": __props.column.noPaddingLeftRight,
+        "no-padding-top-bottom": __props.column.noPaddingTopBottom,
         size: __props.size,
-        "enable-expand": !isMissing.value && props.hasDataValueView,
+        "enable-expand": !isMissing.value && __props.enableDataValueView && __props.column.hasDataValueView,
         "is-selected": __props.isSelected,
         "is-in-cell-selection": __props.isInCellSelection,
         "is-to-be-expanded": __props.isToBeExpanded,
         "is-editing": __props.isEditing,
-        "inline-block": __props.inlineBlock,
         onClick: _cache[0] || (_cache[0] = (value) => emit("click", value)),
         onExpand: _cache[1] || (_cache[1] = () => emit("dataValueView")),
         onSelect: _cache[2] || (_cache[2] = (value) => emit("select", value)),
@@ -18184,7 +18181,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ])
           };
         })
-      ]), 1032, ["is-missing", "is-slotted", "text", "title", "color", "classes", "select-on-move", "default-top-bottom-padding", "default-left-right-padding", "size", "enable-expand", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-editing", "inline-block"]);
+      ]), 1032, ["is-missing", "is-slotted", "text", "title", "color", "select-on-move", "default-top-bottom-padding", "default-left-right-padding", "no-padding-left-right", "no-padding-top-bottom", "size", "enable-expand", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-editing"]);
     };
   }
 });
@@ -18203,7 +18200,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     rowData: { default: () => ({}) },
     row: { default: () => [] },
     tableConfig: {},
-    columnConfigs: {},
+    subMenuConfig: {},
+    columns: {},
+    colSizes: {},
     rowConfig: { default: () => ({}) },
     rowHeight: { default: DEFAULT_ROW_HEIGHT },
     isSelected: { type: Boolean, default: false },
@@ -18239,34 +18238,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const activeDrag = ref(false);
     const rowHeightOnDragStart = ref(0);
     const columnKeys = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "key")
-    );
-    const columnSizes = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "size")
-    );
-    const formatters = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "formatter")
-    );
-    const classGenerators = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "classGenerator")
-    );
-    const slottedColumns = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "hasSlotContent")
-    );
-    const hasDataValueView = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "hasDataValueView")
-    );
-    const noPaddingTopBottom = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "noPaddingTopBottom")
-    );
-    const noPaddingLeftRight = computed(
-      () => getPropertiesFromColumns(props.columnConfigs, "noPaddingLeftRight")
+      () => getPropertiesFromColumns(props.columns, "key")
     );
     const filteredSubMenuItems = computed(() => {
-      if (!props.tableConfig.subMenuItems?.length && !props.rowData?.subMenuItemsForRow?.length) {
+      if (!props.subMenuConfig.subMenuItems?.length && !props.rowData?.subMenuItemsForRow?.length) {
         return [];
       }
-      return props.rowData?.subMenuItemsForRow?.length ? props.rowData?.subMenuItemsForRow : props.tableConfig.subMenuItems;
+      return props.rowData?.subMenuItemsForRow?.length ? props.rowData?.subMenuItemsForRow : props.subMenuConfig.subMenuItems;
     });
     const onDeleteRow = () => {
       emit("deleteRow");
@@ -18398,7 +18376,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           })
         }, [
           __props.tableConfig.enableRowDeletion ? (openBlock(), createElementBlock("td", _hoisted_1$1, [
-            createVNode(unref(_sfc_main$1s), {
+            createVNode(unref(_sfc_main$1v), {
               ref_key: "deleteButton",
               ref: deleteButton,
               variant: "transparent",
@@ -18424,7 +18402,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               paddingBottom: `${paddingTopBottom.value}px`
             })
           }, [
-            createVNode(unref(_sfc_main$10), {
+            createVNode(unref(_sfc_main$13), {
               ref_key: "selectionCheckbox",
               ref: selectionCheckbox,
               title: "Select row",
@@ -18449,20 +18427,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 cells.value[ind] = el;
               },
               key: ind,
+              column: __props.columns[ind],
               "cell-data": cell,
               "select-on-move": __props.selectCellsOnMove,
               "is-selected": __props.selectedCellIndex === ind,
               "is-in-cell-selection": __props.cellSelectionRange !== null && ind >= __props.cellSelectionRange.min && ind <= __props.cellSelectionRange.max,
               "is-to-be-expanded": __props.toBeExpandedCellIndex === ind,
-              "is-slotted": Boolean(slottedColumns.value[ind]),
-              "has-data-value-view": __props.tableConfig.enableDataValueViews && Boolean(hasDataValueView.value[ind]),
+              "enable-data-value-view": __props.tableConfig.enableDataValueViews,
               "is-editing": __props.toBeEditedCellIndex === ind,
-              "no-padding-top-bottom": noPaddingTopBottom.value[ind],
-              "no-padding-left-right": noPaddingLeftRight.value[ind],
-              "inline-block": __props.tableConfig.cellRendererInlineBlock,
-              size: columnSizes.value[ind] ?? 100,
-              "class-generators": classGenerators.value[ind],
-              formatter: formatters.value[ind],
+              size: __props.colSizes[ind] ?? 100,
               "default-top-bottom-padding": paddingTopBottom.value,
               "default-left-right-padding": unref(paddingLeftRight),
               onClick: ($event) => onCellClick($event, ind, cell),
@@ -18486,10 +18459,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 }, void 0, true)
               ]),
               _: 2
-            }, 1032, ["cell-data", "select-on-move", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "is-slotted", "has-data-value-view", "is-editing", "no-padding-top-bottom", "no-padding-left-right", "inline-block", "size", "class-generators", "formatter", "default-top-bottom-padding", "default-left-right-padding", "onClick", "onSelect", "onDataValueView"]);
+            }, 1032, ["column", "cell-data", "select-on-move", "is-selected", "is-in-cell-selection", "is-to-be-expanded", "enable-data-value-view", "is-editing", "size", "default-top-bottom-padding", "default-left-right-padding", "onClick", "onSelect", "onDataValueView"]);
           }), 128)),
           filteredSubMenuItems.value?.length ? (openBlock(), createElementBlock("td", _hoisted_2, [
-            createVNode(unref(_sfc_main$1h), {
+            createVNode(unref(_sfc_main$1k), {
               modelValue: isMenuOpen.value,
               "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isMenuOpen.value = $event),
               ariaLabel: "More actions",
@@ -18520,14 +18493,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const Row = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-0ad921a2"]]);
+const Row = /* @__PURE__ */ _export_sfc$1(_sfc_main$3, [["__scopeId", "data-v-24dd5f3c"]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CellSelectionOverlay",
   props: {
     rect: {},
     rowHeight: {},
-    columnSizes: {},
+    colSizes: {},
     rowResizeIndex: {},
     rowResizeDelta: {},
     tableConfig: {},
@@ -18557,14 +18530,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (props.tableConfig.showSelection) {
         currentOffset += SPECIAL_COLUMNS_SIZE;
       }
-      if (props.tableConfig.showCollapser) {
-        currentOffset += SPECIAL_COLUMNS_SIZE;
-      }
       if (props.tableConfig.enableRowDeletion) {
         currentOffset += SPECIAL_COLUMNS_SIZE;
       }
       const offsets = [];
-      props.columnSizes.forEach((size) => {
+      props.colSizes.forEach((size) => {
         offsets.push(currentOffset);
         currentOffset += size;
       });
@@ -18679,7 +18649,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CellSelectionOverlay = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__scopeId", "data-v-f7862e17"]]);
+const CellSelectionOverlay = /* @__PURE__ */ _export_sfc$1(_sfc_main$2, [["__scopeId", "data-v-4eeb1626"]]);
 
 const _sfc_main$1 = {
   components: {
@@ -18688,21 +18658,17 @@ const _sfc_main$1 = {
     Row,
     // TablePopover,
     CellSelectionOverlay,
-    TableCore: _sfc_main$h,
+    TableCore: _sfc_main$i,
     NewRowButton,
     TableActionBar
   },
   props: {
     /**
      * Data props.
-     */
-    data: {
-      type: Array,
-      default: () => []
-    },
-    currentSelection: {
+     */
+    data: {
       type: Array,
-      default: () => []
+      required: true
     },
     /**
      * It specifies how many (empty) rows should be simultated above the given rows in this.data[0]
@@ -18726,6 +18692,10 @@ const _sfc_main$1 = {
       type: Array,
       default: () => []
     },
+    currentSelection: {
+      type: Array,
+      default: () => []
+    },
     /**
      * analogous to currentSelection but for the bottomData
      */
@@ -18733,53 +18703,66 @@ const _sfc_main$1 = {
       type: Array,
       default: () => []
     },
-    totalSelected: {
-      type: Number,
-      default: 0
+    /** Stable per-column definitions. */
+    columns: {
+      type: Array,
+      required: true
     },
-    /**
-     * Config props.
-     */
-    dataConfig: {
+    /** Per-column widths, keyed by column id. */
+    colSizes: {
+      type: Array,
+      default: () => []
+    },
+    /** Per-column filter values, keyed by column id. */
+    colFilterValues: {
       type: Object,
       default: () => ({})
     },
+    /** Active sorts, ordered by sort priority. */
+    colSortValues: {
+      type: Array,
+      default: () => []
+    },
+    /** Feature switches for the table. */
     tableConfig: {
       type: Object,
-      default: () => ({}),
-      validate(tableConfig) {
-        if (typeof tableConfig !== "object") {
-          return false;
-        }
-        const requiredProperties = [
-          "showSelection",
-          "showCollapser",
-          "subMenuItems",
-          "groupSubMenuItems"
-        ];
-        const isValid = requiredProperties.every(
-          (key) => tableConfig.hasOwnProperty(key)
-        );
-        const requiredConfigs = {
-          pageConfig: [
-            "currentSize",
-            "tableSize",
-            "pageSize",
-            "possiblePageSizes",
-            "currentPage"
-          ],
-          columnSelectionConfig: ["possibleColumns", "currentColumns"],
-          sortConfig: ["sortColumn", "sortDirection"]
-        };
-        return isValid && Object.entries(requiredConfigs).every((key, values) => {
-          if (tableConfig[key]) {
-            return values.every(
-              (configOption) => tableConfig[key].hasOwnProperty(configOption)
-            );
-          }
-          return true;
-        });
-      }
+      default: () => ({})
+    },
+    /** Runtime totals and flags for the table. */
+    tableState: {
+      type: Object,
+      default: () => ({})
+    },
+    /** Pagination config; its presence enables pagination. */
+    pageConfig: {
+      type: Object,
+      default: void 0
+    },
+    /** Runtime pagination state. */
+    pageState: {
+      type: Object,
+      default: void 0
+    },
+    /** Action-bar config; its presence enables the action bar. */
+    actionConfig: {
+      type: Object,
+      default: void 0
+    },
+    /** Runtime state of the action bar. */
+    actionState: {
+      type: Object,
+      default: void 0,
+      required: false
+    },
+    /** Per-row and per-group submenu config. */
+    subMenuConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    /** Appearance of the table's rows. */
+    rowConfig: {
+      type: Object,
+      default: () => ({})
     },
     disableRowHeightTransition: {
       type: Boolean,
@@ -18920,9 +18903,7 @@ const _sfc_main$1 = {
       editingCellInitialValue.value = initialValue ?? null;
     };
     const isEditingEnabled = computed(
-      () => getPropertiesFromColumns(props.dataConfig.columnConfigs, "editable").some(
-        Boolean
-      )
+      () => getPropertiesFromColumns(props.columns, "editable").some(Boolean)
     );
     const { handleCopyOnKeydown, handleDeleteSelection } = useCellCopyPaste({
       focusWithin,
@@ -18944,13 +18925,13 @@ const _sfc_main$1 = {
     };
     const toBeShownCell = ref(null);
     const closeDataValueView = () => {
-      if (props.tableConfig.dataValueViewIsShown) {
+      if (props.tableState.dataValueViewIsShown) {
         emit("closeDataValueView");
       }
       toBeShownCell.value = null;
     };
     provideDataValueViewsIsShown(
-      toRef(props, "tableConfig"),
+      toRef(props, "tableState"),
       closeDataValueView
     );
     const showNewColumnAndRowButton = computed(
@@ -19023,102 +19004,22 @@ const _sfc_main$1 = {
   },
   computed: {
     minRowHeight() {
-      return this.dataConfig.rowConfig.compactMode ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
+      return this.rowConfig.compactMode ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
     },
     initialRowHeight() {
-      return this.dataConfig.rowConfig?.rowHeight || this.minRowHeight;
+      return this.rowConfig?.rowHeight || this.minRowHeight;
     },
     currentRowHeight() {
       return this.resizedRowHeight ?? this.initialRowHeight;
     },
-    /*
-     * Current table config. E.g. if 4/10 columns displayed, 'current' fields return values w/ length 4.
-     */
-    columnHeaders() {
-      return getPropertiesFromColumns(this.dataConfig.columnConfigs, "header");
-    },
-    columnSubHeaders() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "subHeader"
-      );
-    },
-    columnHeaderSubMenuItems() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "headerSubMenuItems"
-      ).map(
-        (menuItems, index) => useHeaderMenuItems({
-          enableFiltering: Boolean(this.tableConfig.showColumnFilters),
-          filterConfig: this.columnFilterConfigs[index],
-          enableSorting: Boolean(this.tableConfig.sortConfig) && Boolean(this.columnSortConfigs[index]),
-          sortDirection: this.tableConfig.sortConfig?.sortColumn === index ? this.tableConfig.sortConfig?.sortDirection ?? 0 : 0,
-          headerSubMenuItems: menuItems,
-          sortTexts: columnSortText[this.columnTypes[index] ?? "default"],
-          onColumnSort: (direction) => this.onColumnSort(index, direction),
-          openFilterControl: () => this.openActionBarFilterControl(index),
-          clearFilter: () => this.clearColumnFilter(index)
-        })
-      );
-    },
-    columnSizes() {
-      return getPropertiesFromColumns(this.dataConfig.columnConfigs, "size");
-    },
-    columnTypes() {
-      return getPropertiesFromColumns(this.dataConfig.columnConfigs, "type");
-    },
     selectedHeaderIndex() {
       return this.selectedCell?.y === -1 ? this.selectedCell.x : null;
     },
-    columnKeys() {
-      return getPropertiesFromColumns(this.dataConfig.columnConfigs, "key");
-    },
-    columnSortConfigs() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "isSortable"
-      ).map((isSortable) => isSortable ?? true);
-    },
-    columnFilterConfigs() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "filterConfig"
-      );
-    },
-    columnHeaderColors() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "headerColor"
-      ).map((color) => color ?? null);
-    },
-    columnDeletables() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "deletable"
-      );
-    },
-    columnEditables() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "editable"
-      );
-    },
     slottedColumns() {
-      return getPropertiesFromColumns(
-        this.dataConfig.columnConfigs,
-        "hasSlotContent"
-      ).map(
+      return getPropertiesFromColumns(this.columns, "hasSlotContent").map(
         (hasSlotContent, colInd) => hasSlotContent ? colInd : null
       ).filter((colInd) => colInd !== null);
     },
-    tableHeaderClass() {
-      return [
-        "table-header",
-        {
-          "sub-menu-active": this.tableConfig.subMenuItems?.length
-        }
-      ];
-    },
     topDataLength() {
       if (this.data === null || this.data.length === 0) {
         return 0;
@@ -19158,9 +19059,6 @@ const _sfc_main$1 = {
         return isTop ? this.currentSelection[groupInd][indexInInput] : this.currentBottomSelection[indexInInput];
       };
     },
-    enableRowResize() {
-      return this.dataConfig.rowConfig.enableResizing;
-    },
     scrollerItemSize() {
       if (this.currentRowHeight === "dynamic") {
         return this.minRowHeight;
@@ -19170,14 +19068,16 @@ const _sfc_main$1 = {
     sortControlOptions() {
       const selectableColumns = [];
       const selectableDirections = {};
-      this.columnHeaders.forEach((header, index) => {
-        if (!this.columnSortConfigs[index]) {
+      this.columns.forEach((column) => {
+        if (column.isNotSortable) {
           return;
         }
-        const stringIndex = index.toString();
-        selectableColumns.push({ id: stringIndex, text: header });
-        const sortTexts = columnSortText[this.columnTypes[index] ?? "default"];
-        selectableDirections[stringIndex] = [
+        selectableColumns.push({
+          id: column.id,
+          text: column.header
+        });
+        const sortTexts = columnSortText[column.type ?? "default"];
+        selectableDirections[column.id] = [
           { id: "1", text: sortTexts.ascending },
           { id: "-1", text: sortTexts.descending }
         ];
@@ -19186,12 +19086,12 @@ const _sfc_main$1 = {
     }
   },
   watch: {
-    "dataConfig.rowConfig.compactMode": {
+    "rowConfig.compactMode": {
       handler() {
         this.resetRowHeight();
       }
     },
-    "dataConfig.rowConfig.rowHeight": {
+    "rowConfig.rowHeight": {
       handler() {
         this.resetRowHeight();
       }
@@ -19273,6 +19173,10 @@ const _sfc_main$1 = {
       this.clearCellSelection();
       this.$emit("columnSort", colInd, sortDirection);
     },
+    onActionBarColumnSort(columnId, sortDirection) {
+      const colInd = columnId === void 0 ? void 0 : this.columns.findIndex((column) => column.id === columnId);
+      this.onColumnSort(colInd, sortDirection);
+    },
     onSelectAll(selected) {
       consola.debug(`TableUI emitting: selectAll ${selected}`);
       this.$emit("selectAll", selected);
@@ -19294,7 +19198,7 @@ const _sfc_main$1 = {
       this.selectCell(
         { x: cellInd, y: rowInd },
         groupInd === null ? isTop : groupInd,
-        ignoreIfSelected || Boolean(this.dataConfig.columnConfigs[cellInd]?.editable)
+        ignoreIfSelected || Boolean(this.columns[cellInd]?.editable)
       );
       this.stopEditingCell();
     },
@@ -19302,9 +19206,7 @@ const _sfc_main$1 = {
       if (this.toBeEditedCell && this.toBeEditedCell.x === cellInd && this.toBeEditedCell.y === rowInd) {
         return;
       }
-      const isEditable = Boolean(
-        this.dataConfig.columnConfigs[cellInd]?.editable
-      );
+      const isEditable = Boolean(this.columns[cellInd]?.editable);
       if (isEditable && this.isSingleSelectedCell({ x: cellInd, y: rowInd })) {
         this.onStartEditingCell();
       } else {
@@ -19327,7 +19229,7 @@ const _sfc_main$1 = {
     onTableBodyFocusOut() {
       this.changeFocus(false);
       if (this.selectedCell) {
-        if (this.columnEditables[this.selectedCell.x]) {
+        if (this.columns[this.selectedCell.x]?.editable) {
           this.selectCell(this.selectedCell, this.currentRectId ?? 0, true);
         } else {
           this.clearCellSelection();
@@ -19390,8 +19292,7 @@ const _sfc_main$1 = {
       this.stopEditingCell();
     },
     onMoveSelectionOutOfBodyUp({ columnInd }) {
-      const isHeaderFocusable = this.tableConfig.enableHeaderCellSelection || Boolean(this.columnHeaderSubMenuItems[columnInd]?.length) || Boolean(this.columnDeletables[columnInd]) || Boolean(this.columnEditables[columnInd]);
-      if (!isHeaderFocusable) {
+      if (!this.header?.isColumnHeaderFocusable(columnInd)) {
         return;
       }
       this.clearCellSelection();
@@ -19424,7 +19325,7 @@ const _sfc_main$1 = {
       }
     },
     onMoveIntoBodyFromRight() {
-      const lastColumnInd = this.columnHeaders.length - 1;
+      const lastColumnInd = this.columns.length - 1;
       const lastRowAndRectId = this.lastRowAndRectIdBeforeMovingToNewColumnButton ?? {
         rowInd: -1,
         rectId: null
@@ -19513,7 +19414,7 @@ const _sfc_main$1 = {
       if (direction === "right") {
         if (type === "delete" && this.tableConfig.showSelection) {
           this.focusRowVirtualColumn("selection", rowInd, rectId);
-        } else if (this.columnHeaders.length > 0) {
+        } else if (this.columns.length > 0) {
           this.onMoveIntoBodyFromLeft(rowInd, rectId);
         }
       } else if (direction === "left") {
@@ -19554,7 +19455,7 @@ const _sfc_main$1 = {
         });
         return;
       }
-      if (columnInd === this.columnHeaders.length) {
+      if (columnInd === this.columns.length) {
         this.onMoveSelectionOutOfBodyRight({
           rowInd,
           rectId: this.currentRectId
@@ -19572,7 +19473,7 @@ const _sfc_main$1 = {
         expandSelection
       );
       await this.scrollToCellSelectionOverlay();
-      this.toBeShownCell = this.tableConfig.dataValueViewIsShown ? this.selectedCell : null;
+      this.toBeShownCell = this.tableState.dataValueViewIsShown ? this.selectedCell : null;
     },
     async expandSelectedCell() {
       if (this.selectedCell && this.tableConfig.enableDataValueViews) {
@@ -19581,7 +19482,7 @@ const _sfc_main$1 = {
       }
     },
     onStartEditingCell(initialValue) {
-      if (this.selectedCell && this.dataConfig.columnConfigs[this.selectedCell.x]?.editable) {
+      if (this.selectedCell && this.columns[this.selectedCell.x]?.editable) {
         this.setToBeEditedCell(this.selectedCell, initialValue);
       }
     },
@@ -19649,8 +19550,8 @@ const _sfc_main$1 = {
       this.columnResizeActive = false;
       this.$emit("columnResizeEnd");
     },
-    getCellContentSlotName(columnKeys, columnId) {
-      return `cellContent-${columnKeys[columnId]}`;
+    getCellContentSlotName(columns, columnId) {
+      return `cellContent-${columns[columnId].key}`;
     },
     getHeaderComponent() {
       return this.$refs.header;
@@ -19682,8 +19583,8 @@ const _sfc_main$1 = {
     },
     getRowData(row) {
       const isEmptyArray = Array.isArray(row) && row.length === 0;
-      return isEmptyArray ? row : this.columnKeys.map(
-        (column) => row[column]
+      return isEmptyArray ? row : this.columns.map(
+        (column) => row[column.key]
       );
     },
     getRowRefName(groupInd, rowInd) {
@@ -19720,7 +19621,7 @@ const _sfc_main$1 = {
       this.$refs.actionBar?.openFilterControl(columnIndex);
     },
     clearColumnFilter(columnIndex) {
-      const config = this.columnFilterConfigs[columnIndex];
+      const config = this.columns[columnIndex].filterConfig;
       if (config) {
         this.$emit("columnFilter", columnIndex, defaultValueFor(config.is));
       }
@@ -19738,26 +19639,25 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TableCore = resolveComponent("TableCore");
   const _component_PageControls = resolveComponent("PageControls");
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(_component_TableActionBar, {
+    $props.actionConfig ? (openBlock(), createBlock(_component_TableActionBar, {
+      key: 0,
       ref: "actionBar",
-      "all-rows-count": $props.tableConfig.pageConfig?.tableSize,
-      "filtered-rows-count": $props.tableConfig.pageConfig?.currentSize,
-      "all-columns-count": $props.tableConfig.pageConfig?.columnCount,
-      "filtered-columns-count": $options.columnHeaders.length,
-      title: $props.tableConfig.pageConfig?.actionBarTitle,
-      "row-label": $props.tableConfig.pageConfig?.rowLabel,
-      "show-table-size": $props.tableConfig.pageConfig?.showTableSize,
-      "show-filter-control": Boolean($props.tableConfig.showColumnFilters),
-      "show-sort-control": Boolean($props.tableConfig.sortConfig),
-      "sort-config": $props.tableConfig.sortConfig,
+      "all-rows-count": $props.tableState.tableSize,
+      "filtered-rows-count": $props.tableState.currentSize,
+      "all-columns-count": $props.tableState.columnCount,
+      "filtered-columns-count": $props.columns.length,
+      title: $props.actionState?.actionBarTitle,
+      "row-label": $props.tableConfig.rowLabel,
+      "show-table-size": $props.tableConfig.showTableSize,
+      "action-config": $props.actionConfig,
+      "col-sort-values": $props.colSortValues,
+      "col-filter-values": $props.colFilterValues,
       "sort-control-options": $options.sortControlOptions,
-      "filter-configs": $options.columnFilterConfigs,
-      "column-headers": $options.columnHeaders,
-      "settings-items": $props.tableConfig.settingsItems,
+      columns: $props.columns,
       onResetTemporaryView: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("resetTemporaryView")),
       onColumnFilter: _cache[1] || (_cache[1] = (colInd, value) => _ctx.$emit("columnFilter", colInd, value)),
-      onOnColumnSort: $options.onColumnSort
-    }, null, 8, ["all-rows-count", "filtered-rows-count", "all-columns-count", "filtered-columns-count", "title", "row-label", "show-table-size", "show-filter-control", "show-sort-control", "sort-config", "sort-control-options", "filter-configs", "column-headers", "settings-items", "onOnColumnSort"]),
+      onOnColumnSort: $options.onActionBarColumnSort
+    }, null, 8, ["all-rows-count", "filtered-rows-count", "all-columns-count", "filtered-columns-count", "title", "row-label", "show-table-size", "action-config", "col-sort-values", "col-filter-values", "sort-control-options", "columns", "onOnColumnSort"])) : createCommentVNode("", true),
     createElementVNode("table", {
       ref: "wrapper",
       tabindex: -1,
@@ -19775,14 +19675,15 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         ref: "tableCore",
         "scroll-data": $options.scrollData,
         "total-width": $setup.totalWidth,
-        "column-sizes": $options.columnSizes,
+        "col-sizes": $props.colSizes,
         "column-resize": { active: $data.columnResizeActive },
         "table-config": $props.tableConfig,
+        "sub-menu-config": $props.subMenuConfig,
         "scroll-config": {
           itemSize: $options.scrollerItemSize,
           numRowsAbove: $props.numRowsAbove,
           numRowsBelow: $props.numRowsBelow,
-          compact: Boolean($props.dataConfig.rowConfig.compactMode)
+          compact: Boolean($props.rowConfig.compactMode)
         },
         "current-row-height": $options.currentRowHeight,
         "new-column-button-width": $setup.newColumnButtonWidth,
@@ -19801,9 +19702,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "row-data": row,
             row: $options.getRowData(row),
             "table-config": $props.tableConfig,
-            "show-drag-handle": $options.enableRowResize,
-            "column-configs": $props.dataConfig.columnConfigs,
-            "row-config": $props.dataConfig.rowConfig,
+            "sub-menu-config": $props.subMenuConfig,
+            "show-drag-handle": $props.tableConfig.enableRowResizing,
+            columns: $props.columns,
+            "col-sizes": $props.colSizes,
+            "row-config": $props.rowConfig,
             "row-height": $options.currentRowHeight,
             "min-row-height": $options.minRowHeight,
             "is-selected": $options.currentSelectionMap(rowInd, groupInd || 0),
@@ -19846,12 +19749,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             renderList($options.slottedColumns, (colInd) => {
               return {
-                name: $options.getCellContentSlotName($options.columnKeys, colInd),
+                name: $options.getCellContentSlotName($props.columns, colInd),
                 fn: withCtx((cellData) => [
-                  renderSlot(_ctx.$slots, `cellContent-${$options.columnKeys[colInd].toString()}`, {
+                  renderSlot(_ctx.$slots, `cellContent-${$props.columns[colInd].key}`, {
                     data: {
                       ...cellData,
-                      key: $options.columnKeys[colInd],
+                      key: $props.columns[colInd].key,
                       rowInd,
                       colInd
                     }
@@ -19859,26 +19762,32 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               };
             })
-          ]), 1032, ["row-data", "row", "table-config", "show-drag-handle", "column-configs", "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"])
+          ]), 1032, ["row-data", "row", "table-config", "sub-menu-config", "show-drag-handle", "columns", "col-sizes", "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, width = null }) => [
           createVNode(_component_Header, {
             ref: "header",
             style: normalizeStyle(width === null ? {} : { width: `${width}px` }),
             "table-config": $props.tableConfig,
-            "column-headers": $options.columnHeaders,
-            "column-sub-headers": $options.columnSubHeaders,
-            "column-sizes": $options.columnSizes,
-            "column-sub-menu-items": $options.columnHeaderSubMenuItems,
-            "column-header-colors": $options.columnHeaderColors,
-            "column-deletables": $options.columnDeletables,
-            "column-editables": $options.columnEditables,
-            "is-selected": $props.totalSelected > 0,
+            "action-config": $props.actionConfig,
+            columns: $props.columns,
+            "col-filter-values": $props.colFilterValues,
+            "col-sizes": $props.colSizes,
+            "col-sort-values": $props.colSortValues,
+            "is-selected": $props.tableState.totalSelected > 0,
             "get-drag-handle-height": getDragHandleHeight,
-            class: normalizeClass($options.tableHeaderClass),
+            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,
+            onOpenActionBarFilterControl: $options.openActionBarFilterControl,
+            onClearColumnFilter: $options.clearColumnFilter,
             onDeleteColumn: $options.onDeleteColumn,
             onColumnResize: $options.onColumnResize,
             onAllColumnsResize: $options.onAllColumnsResize,
@@ -19897,7 +19806,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
               renderSlot(_ctx.$slots, "subHeader", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
             ]),
             _: 3
-          }, 8, ["style", "table-config", "column-headers", "column-sub-headers", "column-sizes", "column-sub-menu-items", "column-header-colors", "column-deletables", "column-editables", "is-selected", "get-drag-handle-height", "class", "show-new-column-button", "selected-header-index", "onHeaderSelect", "onDeleteColumn", "onColumnResize", "onAllColumnsResize", "onColumnResizeStart", "onColumnResizeEnd", "onMoveDownFromHeaderCell", "onHeaderCellSelect", "onHeaderCellDeselect", "onUpdate:newColumnButtonWidth", "onNewColumnButtonClick"])
+          }, 8, ["style", "table-config", "action-config", "columns", "col-filter-values", "col-sizes", "col-sort-values", "is-selected", "get-drag-handle-height", "class", "show-new-column-button", "selected-header-index", "onHeaderSelect", "onColumnSort", "onOpenActionBarFilterControl", "onClearColumnFilter", "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, {
@@ -19908,9 +19817,9 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "table-config": $props.tableConfig,
             "row-resize-index": $data.currentResizedScrollIndex,
             "row-resize-delta": $data.currentRowSizeDelta,
-            "column-sizes": $options.columnSizes,
+            "col-sizes": $props.colSizes,
             "cell-selection-rect-focus-corner": $setup.focusWithin ? $setup.selectedCell : void 0
-          }, null, 8, ["rect", "row-height", "table-config", "row-resize-index", "row-resize-delta", "column-sizes", "cell-selection-rect-focus-corner"])) : createCommentVNode("", true)
+          }, null, 8, ["rect", "row-height", "table-config", "row-resize-index", "row-resize-delta", "col-sizes", "cell-selection-rect-focus-corner"])) : createCommentVNode("", true)
         ]),
         belowBody: withCtx(() => [
           $setup.showNewColumnAndRowButton ? (openBlock(), createBlock(_component_NewRowButton, {
@@ -19923,17 +19832,20 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["onClick", "onKeydownUp"])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["scroll-data", "total-width", "column-sizes", "column-resize", "table-config", "scroll-config", "current-row-height", "new-column-button-width", "onScrollerUpdate", "onMoveSelection", "onClearSelection", "onExpandSelectedCell", "onStartEditing"]),
-      $props.tableConfig.pageConfig?.showPageControls ?? true ? (openBlock(), createBlock(_component_PageControls, {
+      }, 8, ["scroll-data", "total-width", "col-sizes", "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.tableConfig.pageConfig,
+        "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", "onPageChange", "onPageSizeUpdate"])) : createCommentVNode("", true)
+      }, null, 8, ["page-config", "table-config", "page-state", "table-state", "onPageChange", "onPageSizeUpdate"])) : createCommentVNode("", true)
     ], 544)
   ]);
 }
-const TableUI = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-829ae68c"]]);
+const TableUI = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-fa3f06f3"]]);
 
 const useTableReady = ({ onReady }) => {
   const autoSizesInitialized = ref(false);
@@ -19973,7 +19885,18 @@ const _sfc_main = {
       type: Array,
       default: () => []
     },
-    dataConfig: {
+    /** Stable per-column definitions (forwarded to TableUI). */
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    /** Per-column widths, ordered by displayed column (forwarded to TableUI). */
+    colSizes: {
+      type: Array,
+      default: () => []
+    },
+    /** Appearance of the table's rows (forwarded to TableUI). */
+    rowConfig: {
       type: Object,
       default: () => ({})
     },
@@ -19981,6 +19904,54 @@ const _sfc_main = {
       type: Object,
       default: () => ({})
     },
+    tableState: {
+      type: Object,
+      default: () => ({})
+    },
+    pageConfig: {
+      type: Object,
+      default: void 0
+    },
+    pageState: {
+      type: Object,
+      default: void 0
+    },
+    actionConfig: {
+      type: Object,
+      default: void 0
+    },
+    actionState: {
+      type: Object,
+      default: void 0
+    },
+    colFilterValues: {
+      type: Object,
+      default: () => ({})
+    },
+    colSortValues: {
+      type: Array,
+      default: () => []
+    },
+    numRowsAbove: {
+      type: Number,
+      default: 0
+    },
+    numRowsBelow: {
+      type: Number,
+      default: 0
+    },
+    bottomData: {
+      type: Array,
+      default: () => []
+    },
+    currentBottomSelection: {
+      type: Array,
+      default: () => []
+    },
+    subMenuConfig: {
+      type: Object,
+      default: () => ({})
+    },
     /** This object contains all the options necessary to calculate the sizes based on the
      * content. In case only one of calculateForBody/calculateForHeader is true, the emitted object contains auto
      * sizes according to body/header. In case both are true, the maximum of both values is used. For fixedSizes only
@@ -20029,8 +20000,8 @@ const _sfc_main = {
     mountTableUIForAutoSizeCalculation() {
       return this.data !== null && this.calculateSizes;
     },
-    dataConfigIds() {
-      return getPropertiesFromColumns(this.dataConfig.columnConfigs, "id");
+    columnIds() {
+      return getPropertiesFromColumns(this.columns, "id");
     },
     currentColumnsWithAutoSize() {
       return /* @__PURE__ */ new Set([
@@ -20041,7 +20012,7 @@ const _sfc_main = {
     removedColumnIds() {
       const removedColumnIds = /* @__PURE__ */ new Set();
       this.currentColumnsWithAutoSize.forEach((columnId) => {
-        if (!this.dataConfigIds.includes(columnId)) {
+        if (!this.columnIds.includes(columnId)) {
           removedColumnIds.add(columnId);
         }
       });
@@ -20049,7 +20020,7 @@ const _sfc_main = {
     },
     addedColumnIds() {
       const addedColumnIds = /* @__PURE__ */ new Set();
-      this.dataConfigIds.forEach((columnId) => {
+      this.columnIds.forEach((columnId) => {
         if (!this.currentColumnsWithAutoSize.has(columnId)) {
           addedColumnIds.add(columnId);
         }
@@ -20062,25 +20033,16 @@ const _sfc_main = {
     paginatedDataForAutoColumnSizesCalculation() {
       return [this.data.flat().slice(0, DEFAULT_NUM_ROWS)];
     },
-    dataConfigForCalculationWithAutoColumnSizes() {
-      return {
-        ...this.dataConfig,
-        columnConfigs: this.dataConfig.columnConfigs.map(
-          (columnConfig) => ({
-            ...columnConfig,
-            size: MAX_AUTO_COLUMN_SIZE
-          })
-        )
-      };
+    colSizesForCalculationWithAutoColumnSizes() {
+      return this.columnIds.map(() => MAX_AUTO_COLUMN_SIZE);
     },
-    dataConfigForAutoSizesCalculation() {
-      return this.autoColumnSizingActive ? this.dataConfigForCalculationWithAutoColumnSizes : this.dataConfig;
+    colSizesForAutoSizesCalculation() {
+      return this.autoColumnSizingActive ? this.colSizesForCalculationWithAutoColumnSizes : this.colSizes;
     },
     tableConfigForAutoSizesCalculation() {
       return {
         ...this.tableConfig,
-        forceRenderAll: true,
-        cellRendererInlineBlock: true
+        forceRenderAll: true
       };
     },
     autoColumnSizingActive() {
@@ -20093,7 +20055,7 @@ const _sfc_main = {
       return this.autoColumnSizingActive && !this.useSavedColumnSizes;
     },
     columnPaddingsHorizontal() {
-      return this.dataConfigIds.reduce(
+      return this.columnIds.reduce(
         (paddings, columnId) => {
           paddings[columnId] = CELL_PADDING_HORIZONTAL * 2;
           return paddings;
@@ -20128,12 +20090,12 @@ const _sfc_main = {
       },
       deep: true
     },
-    dataConfigIds(newIds, oldIds) {
+    columnIds(newIds, oldIds) {
       if (newIds.length !== oldIds.length || !newIds.every((el, index) => el === oldIds[index])) {
         this.triggerCalculationOfAutoSizes();
       }
     },
-    "dataConfig.rowConfig.compactMode": {
+    "rowConfig.compactMode": {
       handler() {
         if (this.autoRowHeightOptions.calculate) {
           this.useSavedColumnSizes = true;
@@ -20145,7 +20107,7 @@ const _sfc_main = {
   mounted() {
     if (this.autoRowHeightSizingActive) {
       const unwatchRowHeight = this.$watch(
-        () => this.dataConfig.rowConfig.rowHeight,
+        () => this.rowConfig.rowHeight,
         async () => {
           await sleep(0);
           this.disableRowHeightTransition = false;
@@ -20239,7 +20201,7 @@ const _sfc_main = {
       this.emitNewAutoSizes();
     },
     initializeSizesWithMinSize(minSize) {
-      return this.dataConfigIds.reduce(
+      return this.columnIds.reduce(
         (sizes, columnId) => ({
           ...sizes,
           [columnId]: minSize
@@ -20280,7 +20242,7 @@ const _sfc_main = {
         const sizesByColumn = {};
         const heightsByColumn = {};
         const cellComponents = rowComponent.getCellComponents();
-        this.dataConfigIds.forEach((columnId, columnIndex) => {
+        this.columnIds.forEach((columnId, columnIndex) => {
           if (!fixedSizes.hasOwnProperty(columnId)) {
             const { width, height } = cellComponents[columnIndex].getCellContentDimensions();
             sizesByColumn[columnId] = width;
@@ -20294,7 +20256,7 @@ const _sfc_main = {
     },
     calculateAndSetAutoColumnSizesHeader() {
       const headerCellSizes = this.$refs.tableUIForAutoSize.getHeaderComponent().getHeaderCellWidths();
-      this.dataConfigIds.forEach((columnId, columnIndex) => {
+      this.columnIds.forEach((columnId, columnIndex) => {
         const headerWidth = headerCellSizes[columnIndex];
         if (this.currentColumnSizes[columnId] < headerWidth) {
           this.currentColumnSizes[columnId] = headerWidth;
@@ -20340,8 +20302,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, _ctx.$attrs, {
       data: $props.data,
       "current-selection": $props.currentSelection,
-      "data-config": $props.dataConfig,
+      "current-bottom-selection": $props.currentBottomSelection,
+      columns: $props.columns,
+      "col-sizes": $props.colSizes,
+      "col-filter-values": $props.colFilterValues,
+      "col-sort-values": $props.colSortValues,
+      "num-rows-above": $props.numRowsAbove,
+      "num-rows-below": $props.numRowsBelow,
+      "bottom-data": $props.bottomData,
+      "row-config": $props.rowConfig,
       "table-config": $props.tableConfig,
+      "table-state": $props.tableState,
+      "page-config": $props.pageConfig,
+      "page-state": $props.pageState,
+      "action-config": $props.actionConfig,
+      "action-state": $props.actionState,
+      "sub-menu-config": $props.subMenuConfig,
       "disable-row-height-transition": $data.disableRowHeightTransition,
       "onUpdate:availableWidth": $options.onUpdateAvailableWidth
     }), createSlots({ _: 2 }, [
@@ -20353,14 +20329,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1040, ["style", "data", "current-selection", "data-config", "table-config", "disable-row-height-transition", "onUpdate:availableWidth"]),
+    ]), 1040, ["style", "data", "current-selection", "current-bottom-selection", "columns", "col-sizes", "col-filter-values", "col-sort-values", "num-rows-above", "num-rows-below", "bottom-data", "row-config", "table-config", "table-state", "page-config", "page-state", "action-config", "action-state", "sub-menu-config", "disable-row-height-transition", "onUpdate:availableWidth"]),
     $options.mountTableUIForAutoSizeCalculation ? (openBlock(), createBlock(_component_TableUI, {
       key: 0,
       ref: "tableUIForAutoSize",
       class: "table-column-size-calculation",
       data: $options.paginatedDataForAutoColumnSizesCalculation,
       "current-selection": $props.currentSelection,
-      "data-config": $options.dataConfigForAutoSizesCalculation,
+      columns: $props.columns,
+      "col-sizes": $options.colSizesForAutoSizesCalculation,
+      "row-config": $props.rowConfig,
       "table-config": $options.tableConfigForAutoSizesCalculation,
       onVnodeMounted: $options.calculateAutoSizes
     }, createSlots({ _: 2 }, [
@@ -20372,603 +20350,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "current-selection", "data-config", "table-config", "onVnodeMounted"])) : createCommentVNode("", true)
+    ]), 1032, ["data", "current-selection", "columns", "col-sizes", "row-config", "table-config", "onVnodeMounted"])) : createCommentVNode("", true)
   ], 64);
 }
-const TableUIWithAutoSizeCalculation = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ea7bec0f"]]);
-
-const getColumnDomains = ({ data, formatters, types }) => {
-  let domainMap = {};
-  let nominalColumns = [];
-  Object.entries(types).forEach((entry) => {
-    let [col, colType] = entry;
-    // treat boolean as nominal (as they can have formatted domains)
-    if ([columnTypes.Boolean, columnTypes.Nominal].includes(colType)) {
-      nominalColumns.push(col);
-      domainMap[col] = [];
-    }
-  });
-  data.forEach((row) => {
-    nominalColumns.forEach((col) => {
-      const cellValue = unpackObjectRepresentation(row[col]);
-      const formattedCellValue = formatters?.[col]?.(cellValue) || cellValue;
-      if (!domainMap[col].includes(formattedCellValue)) {
-        domainMap[col].push(formattedCellValue);
-      }
-    });
-  });
-  return domainMap;
-};
-
-const getDefaultFilterValues = (columns, types) => columns.reduce((obj, col) => {
-  obj[col] = columnFilterConfigs[types[col]].getInitialValue();
-  return obj;
-}, {});
-const getInitialFilterValues = (columns, types, initialFilterValues) => columns.reduce((obj, col) => {
-  obj[col] = initialFilterValues.hasOwnProperty(col) ? initialFilterValues[col] : columnFilterConfigs[types[col]].getInitialValue();
-  return obj;
-}, {});
-const getFilterConfigs = ({
-  domains,
-  columns,
-  types,
-  values
-}) => columns.map((col) => {
-  const is = columnFilterConfigs[types[col]].is;
-  if (is === "FilterInputField") {
-    return {
-      is,
-      modelValue: values[col]
-    };
-  }
-  return {
-    is,
-    modelValue: values[col],
-    possibleValues: (domains[col] ?? []).map((val) => ({
-      id: val,
-      text: val
-    }))
-  };
-});
-
-/**
- * Utility for checking the current pagination state and providing the correct page
- * number if the current state is invalid. Invalid page states include a current page
- * number which is outside of the range of the filtered data, a page size which is
- * larger than the total number of rows in the data or a paginated data set size of 0.
- *
- * @param {Number} pageSize - the current page size (in number of rows per page).
- * @param {Number} currentPage - the current page number to check.
- * @param {Number} availableRows - the number of rows in the filtered data set.
- * @param {Number} pageRows - the number of rows in the current paginated data set.
- * @returns {Number|null} new page number or null of no update is needed.
- */
-const getNextPage = (pageSize, currentPage, availableRows, pageRows) => {
-  if (pageSize > availableRows) {
-    return 1;
-  } else if (pageSize * currentPage > availableRows || pageRows < 1) {
-    let newPageNumber = currentPage;
-    while (newPageNumber >= 1) {
-      if (pageSize * newPageNumber > availableRows) {
-        newPageNumber -= 1;
-      } else {
-        break;
-      }
-    }
-    return newPageNumber;
-  }
-  return null;
-};
-
-/**
- * Take a relative row id from a selection event and return the processed index.
- *
- * @param {*} param
- * @param {Number} param.relativeInd - row index provided by event.
- * @param {Number} param.groupInd - row group index provided by event.
- * @param {Number} param.currentPage - the current page number from the table.
- * @param {Number} param.currentPageSize - the current page size from the table.
- * @param {Number} [param.currentGroup] - the current group-by group (if present).
- * @param {Array<Array<Number>>} param.processedIndicies - the grouped and sorted index mapping.
- * @returns {number} index from processed mapping
- */
-const getProcessedRowInd = ({
-  relativeInd,
-  groupInd,
-  currentPage,
-  currentPageSize,
-  currentGroup,
-  processedIndicies,
-}) => {
-  let pageStart = currentPageSize * (currentPage - 1);
-  if (pageStart === 0) {
-    return relativeInd;
-  }
-  if (currentGroup) {
-    let indCount = 0;
-    processedIndicies.forEach((group, gInd) => {
-      if (gInd < groupInd) {
-        indCount += group.length;
-      }
-    });
-    if (indCount <= pageStart) {
-      return pageStart - indCount + relativeInd;
-    }
-    return relativeInd;
-  }
-  return relativeInd + pageStart;
-};
-
-/**
- * Utility function to search a single cell. Formatters are required for the following table data types:
- * Number, String, Nominal, DateTime, Boolean. Errors thrown during search will assume no match was found
- * and return false. Additionally, if no type is supplied, `toString` will be called on the item. Objects
- * and Arrays are stringified to perform a 'deep search'.
- *
- * ** All searches are case insensitive **
- *
- * @param {*} field - the item to search.
- * @param {String} type - the table data type for the search item.
- * @param {Function} formatter - the formatting function to apply to the item before searching.
- * @param {String} query - the search term to locate in the item.
- * @returns {Boolean} - if a match was found.
- */
-const searchCell = (field, type, formatter, query) => {
-  if (typeof field === "undefined") {
-    return false;
-  }
-  try {
-    let formattedData;
-    switch (type) {
-      case columnTypes.Number:
-      case columnTypes.String:
-      case columnTypes.Nominal:
-      case columnTypes.DateTime:
-      case columnTypes.Boolean:
-        formattedData = formatter(field);
-        break;
-      case columnTypes.Array:
-      case columnTypes.Object:
-        formattedData = JSON.stringify(field);
-        // search both JSON data and displayed value if custom formatter provided
-        if (formatter?.name && !columnTypes[formatter.name]) {
-          formattedData += formatter(field);
-        }
-        break;
-      default:
-        formattedData = field.toString();
-    }
-    return formattedData.search(new RegExp(query.trim(), "i")) > -1;
-  } catch (_err) {
-    return false;
-  }
-};
-
-/**
- * Utility for searching an entire row of values. For specifics of the search dynamics, please @see searchCell.
- *
- * @param {*[]} row - an array of values to search.
- * @param {String[]} types - an array of types for the values in the row.
- * @param {Function[]} formatters - an array of formatting functions for values.
- * @param {String} query - the search query to locate in the provided row.
- * @returns {Boolean} - if the query has been matched with an item in the row.
- */
-const searchRow = (row, types, formatters, query) =>
-  row.some((data, colInd) =>
-    searchCell(
-      unpackObjectRepresentation(data),
-      types[colInd],
-      formatters[colInd],
-      query,
-    ),
-  );
-
-/**
- * Utility function designed to consume an entire data set and output only the rows which match the provided
- * filter state. This filtering happens on three levels:
- *
- *      1.) Time filtering- if a time filter is provided with a DateTime column, any data outside of this range
- *          will be excluded from the returned data subset. If either parameter is omitted, then no filtering on
- *          DateTime will be performed.
- *      2.) Search filtering- if a search query is provided, the data set will be checked for matching rows on a
- *          global level- meaning any match in any column will satisfy this condition and move on for further
- *          filtering. If this search query is omitted, all data which passed the time filter (if provided), will
- *          continue on to column filtering.
- *      3.) Column filtering- if there are active column filters for the data set, each row will be checked on a
- *          columnar basis for values matching the filter configuration for that column. This filtering is type
- *          sensitive (defined in @see table.config.js ).
- *
- * @param {Object} filterConfig - the object mapping of the required fields for filtering the data.
- * @param {Object[]} filterConfig.data - the data set to process.
- * @param {String[]} filterConfig.columnKeys - the column keys for the row Objects of the currently displayed data.
- *      Should only be the currently displayed columns, because users only want to filter based on the information
- *      currently displayed.
- * @param {Object} filterConfig.formatters - a columnKey/function mapping for the formatting functions of the column
- *      data. Enables filtering on the data the user is viewing, as opposed to the raw data values which may have
- *      undergone some point-wise transformations depending on the table configuration.
- * @param {Object} filterConfig.types - a columnKey/type (@see table.config.js ) mapping for the columns in the data
- *      set. Allows data-type specific filtering.
- * @param {String} filterConfig.timeFilter - the optional active time filter value. Possible values are the keys
- *      found in @see time.config.js . If none is provided, no time filtering will be performed.
- * @param {String} filterConfig.timeFilterKey - the optional columnKey of the DateTime column which should be used
- *      for time filtering. Require IFF a timeFilter has been provided.
- * @param {String} filterConfig.searchQuery - the optional global search query active for the dataset. If none is
- *      provided, no global search or filtering will be performed.
- * @param {Object} filterConfig.filterValues - the columnKey/value mapping for any currently active column-specific
- *      filters. If no filters are active, an empty Object should be provided.
- * @returns {Object} filteredDataConfig - contains the results of the filtering operations.
- * @returns {Object[]} filteredDataConfig.filteredData - the rows which passed all provided filtering operations.
- * @returns {Number[]} filteredDataConfig.filteredIndicies - an array of the original row indicies for the filtered
- *      data subset. Can be used for tracking transformations of the data.
- */
-const filter = (filterConfig) => {
-  let {
-    data,
-    columnKeys,
-    formatters,
-    types,
-    timeFilter,
-    timeFilterKey,
-    searchQuery,
-    filterValues,
-  } = filterConfig;
-  let localColumnTypes = columnKeys.map((colKey) => types[colKey]);
-  let filters = Object.entries(filterValues);
-  let columnFormatters = Object.values(formatters);
-  let filteredIndicies = [];
-  let filteredData = data.filter((row, rowInd) => {
-    if (timeFilter) {
-      let inTimeFilter = checkTimeFilter(
-        row[timeFilterKey],
-        tableTimeFilters[timeFilter],
-      );
-      if (!inTimeFilter) {
-        return false;
-      }
-    }
-    let rowValues = columnKeys.map((colKey) => row[colKey]);
-    let shouldSearch = searchQuery && searchQuery.length;
-    if (
-      shouldSearch &&
-      !searchRow(rowValues, localColumnTypes, columnFormatters, searchQuery)
-    ) {
-      return false;
-    }
-    if (filters.length === 0) {
-      filteredIndicies.push(rowInd);
-      return true;
-    }
-    let inFilter = filters.every((entry) => {
-      let colKey = entry[0];
-      let filterVal = entry[1];
-      let colInd = columnKeys.indexOf(colKey);
-      let columnType = localColumnTypes[colInd];
-      let colFormatter = columnFormatters[colInd];
-      let rowValue = unpackObjectRepresentation(row[colKey]);
-      const formattedRowValue = colFormatter
-        ? colFormatter(rowValue)
-        : rowValue;
-      if (filterVal === null) {
-        return rowValue === null;
-      }
-      if (
-        typeof filterVal === "undefined" ||
-        filterVal === "" ||
-        (Array.isArray(filterVal) && filterVal.length === 0)
-      ) {
-        return true;
-      }
-      if (isEmpty(rowValue)) {
-        return false;
-      }
-      switch (columnType) {
-        case columnTypes.Nominal: {
-          return filterVal.includes(formattedRowValue);
-        }
-        case columnTypes.Number:
-        case columnTypes.String:
-        case columnTypes.DateTime:
-        case columnTypes.Object:
-        case columnTypes.Array:
-          return searchCell(rowValue, columnType, colFormatter, filterVal);
-        case columnTypes.Boolean:
-          return filterVal.includes(
-            colFormatter ? colFormatter(rowValue) : rowValue.toString(),
-          );
-        // return filterVal.includes(rowValue.toString());
-        default:
-          return true;
-      }
-    });
-    if (inFilter) {
-      filteredIndicies.push(rowInd);
-    }
-    return inFilter;
-  });
-  return { filteredData, filteredIndicies };
-};
-
-const missingValueSymbol = Symbol("Missing");
-
-/**
- * Utility function for grouping rows in the provided data based on nominal group membership. This group membership
- * is determined by the provided column name and key. If there is no group currently, the function will return a
- * formatted object mapping for the placeholder group 'None' which can then be ignored, but processed in the same
- * way as grouped data. For rows with a missing nominal column value, they will be mapped to the group 'Missing'
- * unless there is already a nominal group mapped to missing (as is sometimes the case with pre-processed data).
- * In this case, a fallback group will be created for 'No group'.
- *
- * This method also expects to receive an array of indicies corresponding to the rows in the master dataset. This
- * allows for transformation tracking during grouping to enable selection or other row-specific actions and events
- * on the returned grouped data.
- *
- * @param {Object} groupConfig - the configuration options to use during grouping.
- * @param {Object[]} groupConfig.sortedData - an array of row data as individual JSON objects in the array.
- * @param {String} groupConfig.groupColumn - the group-by column name (as displayed in the header).
- * @param {String} groupConfig.groupColumnKey - the key representation of the group-by column as found in the row
- *      JSON objects of the sortedData.
- * @param {Number[]} groupConfig.filteredIndicies - the original row indicies of the data filtered/sorted/mutated in
- *      in the same transformation as the sortedData. Used to track method transformations.
- * @returns {Object} groupedDataConfig - a map of group transformation information.
- * @returns {Object} groupedDataConfig.groupedData - an object mapping of group data and the index of the group name in
- *      the groupTitles list.
- * @returns {Array[]} groupedDataConfig.groupedData.data - an array of arrays, each containing a single group of row
- *      JSON objects.
- * @returns {Number} groupedDataConfig.groupedData.groupInd - the index of the group in the groupTitles list.
- * @returns {Array[]} groupedDataConfig.groupedIndicies - an array of arrays of numbers; the arrays representing groups
- *      and the numbers the original indicies.
- * @returns {Array} groupedDataConfig.groupTitles - a list of Group names
- */
-const group = (groupConfig) => {
-  let { filteredData, groupColumn, groupColumnKey, filteredIndicies } =
-    groupConfig;
-  let returnValue = {
-    groupedData: {},
-    groupedIndicies: [],
-    groupTitles: [],
-  };
-  if (!groupColumn || groupColumn === "None") {
-    returnValue.groupedIndicies.push(filteredIndicies);
-    returnValue.groupTitles.push("None");
-    returnValue.groupedData = [
-      {
-        data: filteredData,
-        groupInd: 0,
-      },
-    ];
-    return returnValue;
-  }
-  let containsMissingGroupFromString = false;
-  returnValue.groupedData = filteredData.reduce((map, row, rowInd) => {
-    let rowGroup = unpackObjectRepresentation(row[groupColumnKey]);
-    if (isEmpty(rowGroup) || isMissingValue(rowGroup)) {
-      rowGroup = missingValueSymbol;
-    } else if (rowGroup === missingValueSymbol.description) {
-      containsMissingGroupFromString = true;
-    }
-    if (typeof map[rowGroup] === "undefined") {
-      returnValue.groupTitles.push(rowGroup);
-      let indexTracker = returnValue.groupedIndicies.push([]);
-      map[rowGroup] = {
-        data: [],
-        groupInd: indexTracker - 1,
-      };
-    }
-    returnValue.groupedIndicies[map[rowGroup].groupInd].push(
-      filteredIndicies[rowInd],
-    );
-    map[rowGroup].data.push(row);
-    return map;
-  }, {});
-  let orderedGroups = [];
-  returnValue.groupTitles = returnValue.groupTitles
-    .sort((group1, group2) => {
-      if (group1 === missingValueSymbol) {
-        return 1;
-      } else if (group2 === missingValueSymbol) {
-        return -1;
-      }
-      return group1.toLowerCase() > group2.toLowerCase() ? 1 : -1;
-    })
-    .map((group) => {
-      orderedGroups.push(returnValue.groupedData[group]);
-      if (group === missingValueSymbol) {
-        return containsMissingGroupFromString
-          ? "No group"
-          : missingValueSymbol.description;
-      }
-      return group;
-    });
-  returnValue.groupedData = orderedGroups;
-
-  return returnValue;
-};
-
-/**
- * Utility function to process grouped data into a single page of grouped data based on the current page size
- * and the start and end row indicies. Also creates an updated array for both paginated selection and indicies.
- *
- * @param {Object} paginationConfig - the configuration options to use during pagination.
- * @param {Array[]} paginationConfig.sortedData - a double-nested array containing the full set of filtered,
- *      grouped and sorted data.
- *      @example: [
- *          [row1, row2,...],   // group1
- *          ...,
- *          [rowN, rowN+1, ...], // group2
- *      ]
- * @param {Array[]} paginationConfig.processedIndicies - a double-nested array containing the full set of filtered,
- *      grouped,and sorted indicies which map to the indicies of the previously filtered, grouped and sorted row in
- *      the original data.
- * @param {Array[]} paginationConfig.processedSelection - a double-nested array containing the full set of filtered,
- *      grouped and sorted selection state.
- * @param {Number} paginationConfig.pageSize - the current number of items which should be shown per page.
- * @param {Number} paginationConfig.pageStart - the starting row index to include (zero indexed; inclusive).
- * @param {Number} paginationConfig.pageEnd - the row index of the first row to *exclude* from the page.
- * @returns {Object} paginatedResults - the results of the pagination. All values are double-nested arrays and excluded
- *      groups will be returned as empty arrays and empty data or empty pages will be represented as empty arrays as well.
- * @returns {Array[]} paginatedResults.paginatedData - the paginated data to display on the page.
- * @returns {Array[]} paginatedResults.paginatedSelection - the paginated selection to pass to the TableUI.vue component.
- * @returns {Array[]} paginatedResults.paginatedIndicies - the paginated indicies to map TableUI selection events to their
- *      original indicies.
- */
-const paginate = (paginationConfig) => {
-  let {
-    sortedData,
-    processedIndicies,
-    processedSelection = [],
-    pageSize,
-    pageStart,
-    pageEnd,
-  } = paginationConfig;
-  let includedRows = 0;
-  let totalRows = 0;
-  let paginatedSelection = [];
-  let paginatedIndicies = [];
-  let paginatedData = sortedData.map((dataGroup, groupInd) => {
-    let groupCount = dataGroup.length;
-    let groupStart = totalRows;
-    let groupEnd = groupStart + groupCount;
-    let remainingRows = pageSize - includedRows;
-    let returnValue = [];
-    let skipGroup =
-      remainingRows <= 0 || groupEnd < pageStart || groupStart > pageEnd;
-    let includeEntireGroup =
-      remainingRows >= groupCount &&
-      groupStart >= pageStart &&
-      groupEnd <= pageEnd;
-    if (skipGroup) {
-      returnValue = [];
-      paginatedSelection.push([]);
-      paginatedIndicies.push([]);
-    } else if (includeEntireGroup) {
-      returnValue = dataGroup;
-      paginatedSelection.push(processedSelection[groupInd]);
-      paginatedIndicies.push(processedIndicies[groupInd]);
-    } else {
-      let groupSliceStart = 0;
-      let groupSliceEnd = groupCount;
-      if (groupStart < pageStart) {
-        groupSliceStart = pageStart - groupStart;
-        if (groupCount - groupSliceStart > remainingRows) {
-          groupSliceEnd = groupSliceStart + remainingRows;
-        }
-      } else if (groupSliceStart + remainingRows < groupCount) {
-        groupSliceEnd = groupSliceStart + remainingRows;
-      }
-      returnValue = dataGroup.slice(groupSliceStart, groupSliceEnd);
-      paginatedSelection.push(
-        processedSelection[groupInd]?.slice(groupSliceStart, groupSliceEnd),
-      );
-      paginatedIndicies.push(
-        processedIndicies[groupInd].slice(groupSliceStart, groupSliceEnd),
-      );
-    }
-    includedRows += returnValue.length;
-    totalRows += groupCount;
-    return returnValue;
-  });
-  return { paginatedData, paginatedSelection, paginatedIndicies };
-};
-
-/**
- * Utility function for sorting a data set. This functionality sorts the entire dataset, but also performs sorts within
- * the grouped data. Additionally, transformations of the row order are tracked on an index level so original row order
- * can be tracked.
- *
- * @param {*} sortConfig - the object mapping of the required fields for sorting the data.
- * @param {Array[]} sortConfig.groupedData - an array of arrays, each containing a single group of row JSON objects.
- * @param {Array[]} sortConfig.groupedIndicies - an array of arrays of numbers; the arrays representing groups
- *      and the numbers the original indicies.
- * @param {String} sortConfig.groupColumnKey - the columnKey of the column currently being used as the "group-by"
- *      column.
- * @param {String[]} sortConfig.columnKeys - the column keys for the row Objects of the currently displayed data.
- * @param {Object} sortConfig.columnTypes - a columnKey/type (@see table.config.js ) mapping for the columns in the data
- *      set. Allows data-type specific sorting.
- * @param {String} [sortConfig.sortColumn] - the optional columnKey for the column which should be used to sort the data.
- *      If none is provided, no sorting will be performed.
- * @param {String} sortConfig.sortDirection - either 1 or -1 which correspond to ascending/descending respectively.
- * @returns {Object} sortedDataConfig - contains the results of the sorting operations.
- * @returns {Array[]} sortedDataConfig.sortedData - an array of arrays of row Objects. This data set will be grouped and
- *      sorted according to the provided configuration.
- * @returns {Number[]} sortedDataConfig.sortedIndicies - an array of the original row indicies grouped and sorted according
- *      to the previous grouping and the current sorting transformations which were performed.
- */
-const sort = (sortConfig) => {
-  let {
-    groupedData,
-    groupedIndicies,
-    groupColumnKey,
-    columnKeys,
-    columnTypes: currentColumnTypes,
-    sortColumn,
-    sortDirection,
-  } = sortConfig;
-
-  return groupedData
-    .map(({ data, groupInd }) =>
-      data
-        .map((row, rowInd) => ({
-          row,
-          rowInd: groupedIndicies[groupInd][rowInd],
-        }))
-        .sort(({ row: row1 }, { row: row2 }) => {
-          // only sort within groups
-          if (
-            sortColumn === null ||
-            (groupColumnKey && row1[groupColumnKey] !== row2[groupColumnKey])
-          ) {
-            return 0;
-          }
-          let columnKey = columnKeys[sortColumn];
-          let columnType = currentColumnTypes[sortColumn];
-          let rawVal1 = row1[columnKey];
-          let rawVal2 = row2[columnKey];
-          const val1EmptyOrMissing =
-            isEmpty(rawVal1) || isMissingValue(rawVal1);
-          const val2EmptyOrMissing =
-            isEmpty(rawVal2) || isMissingValue(rawVal2);
-
-          if (val1EmptyOrMissing && val2EmptyOrMissing) {
-            return 0;
-          } else if (val1EmptyOrMissing) {
-            return 1;
-          } else if (val2EmptyOrMissing) {
-            return -1;
-          } else {
-            let order = 0;
-            if (
-              columnType === columnTypes.Array &&
-              rawVal1.length !== rawVal2.length
-            ) {
-              order = rawVal1.length > rawVal2.length ? 1 : -1;
-            } else {
-              let val1comparison = JSON.stringify(row1[columnKey]);
-              let val2comparison = JSON.stringify(row2[columnKey]);
-              if (val1comparison !== val2comparison) {
-                order = val1comparison > val2comparison ? 1 : -1;
-              }
-            }
-            return order * sortDirection;
-          }
-        })
-        .reduce(
-          (acc, mapItem) => {
-            acc.data.push(mapItem.row);
-            acc.indicies.push(mapItem.rowInd);
-            return acc;
-          },
-          { data: [], indicies: [] },
-        ),
-    )
-    .reduce(
-      (acc, { data, indicies }) => {
-        acc.sortedData.push(data);
-        acc.sortedIndicies.push(indicies);
-        return acc;
-      },
-      { sortedData: [], sortedIndicies: [] },
-    );
-};
+const TableUIWithAutoSizeCalculation = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-72cc3068"]]);
 
-export { TableActionBar, TableUI, TableUIWithAutoSizeCalculation, checkTimeFilter, columnFilterConfigs, columnSortText, columnTypes, constants, defaultPageSize, defaultTimeFilter, filter, filterComponents, getColumnDomains, getDefaultFilterValues, getFilterConfigs, getInitialFilterValues, getMissingValueMessage, getNextPage, getProcessedRowInd, group, isMissingValue, months, paginate, sort, tablePageSizes, tableTimeFilters, typeFormatters, unpackObjectRepresentation, valueTypeFormatters };
+export { TableActionBar, TableUI, TableUIWithAutoSizeCalculation, columnFilterConfigs, columnSortText, columnTypes, constants, defaultPageSize, filterComponents, getMissingValueMessage, isMissingValue, tablePageSizes, unpackObjectRepresentation };
 //# sourceMappingURL=index.js.map