@knime/kds-table 0.2.2 → 0.3.0

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 './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
@@ -8241,7 +8137,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 +8267,8 @@ const defaultValueTypes = {
     borderRightColor: color,
     borderBottomColor: color,
     borderLeftColor: color,
-    filter: filter$1,
-    WebkitFilter: filter$1,
+    filter,
+    WebkitFilter: filter,
     mask,
     WebkitMask: mask,
 };
@@ -8381,7 +8277,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))
@@ -15428,24 +15324,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 +15354,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",
@@ -15492,9 +15388,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 +15407,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 +15435,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 +15564,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 +15593,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 +15706,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 +15723,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 +15750,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 +15906,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 +15939,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 +15952,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 +15971,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 +16007,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 +16262,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,7 +16292,7 @@ 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), {
             variant: "transparent",
@@ -16550,9 +16335,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 +16351,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 +16373,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 +16382,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
   },
   props: {
+    tableConfig: {
+      type: Object,
+      required: true
+    },
     pageConfig: {
       type: Object,
-      default: () => ({})
+      required: true
+    },
+    tableState: {
+      type: Object,
+      required: true
+    },
+    pageState: {
+      type: Object,
+      required: true
     }
   },
   emits: ["pageSizeUpdate", "pageChange"],
   computed: {
-    showPageNavigationControls() {
-      return this.pageConfig.showPageControls ?? true;
-    },
     pageSizeItems() {
       return (this.pageConfig.possiblePageSizes ?? []).map((pageSize) => ({
         id: pageSize.toString(),
@@ -16634,28 +16428,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 +16461,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 +16502,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 +16528,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 +16563,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 +16571,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 +16599,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,8 +16633,8 @@ 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"
@@ -16814,19 +16649,19 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               }, null, 8, ["model-value", "possible-values", "onUpdate:modelValue"]),
               createVNode(unref(_sfc_main$z), {
                 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)
@@ -16835,7 +16670,7 @@ 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 value",
@@ -16845,7 +16680,7 @@ 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",
@@ -16878,16 +16713,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 +16731,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 +16762,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 +16775,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,
@@ -17001,10 +16838,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 +16853,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 +16869,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 +16881,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,25 +16891,25 @@ 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)
       );
     };
@@ -17111,7 +16948,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 _cache[0] || (_cache[0] = createTextVNode(" Sorting ", -1))
               ]),
               body: withCtx(() => [
-                createElementVNode("div", _hoisted_1$6, [
+                createElementVNode("div", _hoisted_1$7, [
                   createVNode(unref(_sfc_main$z), {
                     "model-value": selectedColumn.value,
                     "possible-values": possibleColumns.value,
@@ -17138,9 +16975,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 +16987,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 +16997,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 +17016,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,32 +17051,32 @@ 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$1h), {
             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), {
             key: 1,
@@ -17258,18 +17092,100 @@ 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 AUTO_SCROLL_EDGE_SIZE = 20;
-const AUTO_SCROLL_SPEED = 250;
-const useAutoScrollOnRightEdge = ({
-  scrollContainer,
-  autoScrollOffset,
-  onAutoScroll
-}) => {
-  let pointerClientX = 0;
-  let scrollLeftBase = 0;
-  const isInTriggerZone = () => {
+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",
+      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 AUTO_SCROLL_EDGE_SIZE = 20;
+const AUTO_SCROLL_SPEED = 250;
+const useAutoScrollOnRightEdge = ({
+  scrollContainer,
+  autoScrollOffset,
+  onAutoScroll
+}) => {
+  let pointerClientX = 0;
+  let scrollLeftBase = 0;
+  const isInTriggerZone = () => {
     const container = scrollContainer.value;
     if (!container) {
       return false;
@@ -17313,42 +17229,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 columnHeaderRef = "columnHeader";
+const contentRef = "contentRef";
+const mainHeaderRef = "mainHeader";
+const headerTextRef = "headerText";
+const columnDeleteButtonRef = "columnDeleteButton";
+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(columnHeaderRef);
+    const content = useTemplateRef(contentRef);
+    const mainHeader = useTemplateRef(mainHeaderRef);
+    const headerText = useTemplateRef(headerTextRef);
+    const columnDeleteButton = useTemplateRef(
+      columnDeleteButtonRef
+    );
+    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: columnHeaderRef,
+        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: contentRef,
+          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: mainHeaderRef,
+            class: "main-header"
+          }, [
+            createElementVNode("div", {
+              class: "header-text-container",
+              title: __props.column.header
+            }, [
+              createElementVNode("span", { ref: headerTextRef }, toDisplayString(__props.column.header), 1)
+            ], 8, _hoisted_2$2)
+          ]),
+          __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$1s), {
+            ref: columnDeleteButtonRef,
+            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"]))
+          })
+        ])) : createCommentVNode("", true),
+        subMenuItems.value?.length ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createVNode(unref(_sfc_main$1h), {
+            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-cc11c6b2"]]);
+
 const _sfc_main$8 = {
   components: {
     KdsCheckbox: _sfc_main$10,
     KdsButton: _sfc_main$1s,
-    KdsMenuButton: _sfc_main$1h
+    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 +17541,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 +17555,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 +17568,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 +17591,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 +17605,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 +17621,7 @@ const _sfc_main$8 = {
     },
     onHeaderCellBlur(columnIndex) {
       this.focusedHeaderIndex = null;
-      if (!this.columnEditables[columnIndex]) {
+      if (!this.columns[columnIndex].editable) {
         this.$emit("headerCellDeselect");
       }
     },
@@ -17526,90 +17639,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 +17694,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 +17709,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 +17729,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 +17753,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 +17797,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 +17819,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";
@@ -17915,7 +17900,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     text: {},
     title: {},
     color: {},
-    classes: {},
     selectOnMove: { type: Boolean },
     size: {},
     defaultTopBottomPadding: {},
@@ -18037,7 +18021,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("td", {
         class: normalizeClass([
-          __props.classes,
           "data-cell",
           {
             "colored-cell": __props.color,
@@ -18086,25 +18069,23 @@ 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-2bf6d6ac"]]);
 
 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 }
+    inlineBlock: { type: Boolean },
+    enableDataValueView: { type: Boolean }
   },
   emits: ["click", "input", "select", "dataValueView"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -18115,35 +18096,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,16 +18119,17 @@ 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,
@@ -18184,7 +18148,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", "inline-block"]);
     };
   }
 });
@@ -18203,7 +18167,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 +18205,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");
@@ -18449,20 +18394,16 @@ 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,7 +18427,7 @@ 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", "inline-block", "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), {
@@ -18520,14 +18461,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-5dbf98c3"]]);
 
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CellSelectionOverlay",
   props: {
     rect: {},
     rowHeight: {},
-    columnSizes: {},
+    colSizes: {},
     rowResizeIndex: {},
     rowResizeDelta: {},
     tableConfig: {},
@@ -18557,14 +18498,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 +18617,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 +18626,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 +18660,10 @@ const _sfc_main$1 = {
       type: Array,
       default: () => []
     },
+    currentSelection: {
+      type: Array,
+      default: () => []
+    },
     /**
      * analogous to currentSelection but for the bottomData
      */
@@ -18733,53 +18671,69 @@ const _sfc_main$1 = {
       type: Array,
       default: () => []
     },
-    totalSelected: {
-      type: Number,
-      default: 0
-    },
     /**
      * Config props.
      */
-    dataConfig: {
+    /** Stable per-column definitions. */
+    columns: {
+      type: Array,
+      required: true
+    },
+    /** 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 +18874,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 +18896,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 +18975,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 +19030,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 +19039,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 +19057,12 @@ const _sfc_main$1 = {
     }
   },
   watch: {
-    "dataConfig.rowConfig.compactMode": {
+    "rowConfig.compactMode": {
       handler() {
         this.resetRowHeight();
       }
     },
-    "dataConfig.rowConfig.rowHeight": {
+    "rowConfig.rowHeight": {
       handler() {
         this.resetRowHeight();
       }
@@ -19273,6 +19144,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 +19169,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 +19177,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 +19200,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 +19263,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 +19296,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 +19385,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 +19426,7 @@ const _sfc_main$1 = {
         });
         return;
       }
-      if (columnInd === this.columnHeaders.length) {
+      if (columnInd === this.columns.length) {
         this.onMoveSelectionOutOfBodyRight({
           rowInd,
           rectId: this.currentRectId
@@ -19572,7 +19444,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 +19453,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 +19521,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 +19554,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 +19592,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 +19610,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 +19646,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 +19673,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 +19720,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 +19733,31 @@ 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,
+            "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 +19776,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", "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 +19787,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 +19802,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-bac906a7"]]);
 
 const useTableReady = ({ onReady }) => {
   const autoSizesInitialized = ref(false);
@@ -19973,7 +19855,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 +19874,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 +19970,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 +19982,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 +19990,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,19 +20003,11 @@ 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 {
@@ -20093,7 +20026,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 +20061,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 +20078,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 +20172,7 @@ const _sfc_main = {
       this.emitNewAutoSizes();
     },
     initializeSizesWithMinSize(minSize) {
-      return this.dataConfigIds.reduce(
+      return this.columnIds.reduce(
         (sizes, columnId) => ({
           ...sizes,
           [columnId]: minSize
@@ -20280,7 +20213,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 +20227,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 +20273,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 +20300,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 +20321,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-38696592"]]);
 
-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